Dev Faq
0
votes

Comment puis-je forcer des éléments distincts dans un élément "TD" d'une table HTML pour afficher en ligne (de gauche à droite)?

Je mettez à jour une ancienne application Web ASP.NET Web Forms, que mon groupe n'a précédemment pris en charge que sur IE, pour être compatible avec les navigateurs modernes (Chrome, Firefox, etc.). Parmi d'autres questions, je passe un petit problème avec la manière dont les icônes (qui sont également des liens) sont affichées dans un seul élément «TD» d'une certaine table générée lorsque l'application se charge. Les icônes sont des liens vers diverses options liées à chaque entrée / rangée de la table.

sur IE, les icônes sont disposées en ligne, de gauche à droite. Mais sur d'autres navigateurs, les icônes sont empilées verticalement. On m'a dit de rendre le style compatible avec la façon dont il a regardé à IE.

Je pensais que ce serait une simple question de changer de CSS, mais jusqu'à présent, je n'ai pas pu obtenir cela pour travailler. Les icônes dont je parle sont des enfants d'éléments et sont des éléments ou des éléments (qui ont ensuite des enfants img de leur choix), donc j'ai essayé xxx

mais cette n'avait aucun effet du tout.

Le HTML (une fois généré) est une structure comme xxx

donc, résultat attendu: trois icônes dans un élément sont alignées dans une rangée (et Le TD est assez large pour accueillir).

réel: trois icônes avec A sont empilées sur l'autre, rendant chaque rangée "graisse" de haut en bas et jetez le look de la table. < / P>

Je suis assez nouveau à ce sujet, alors j'ai l'impression de manquer quelque chose de simple, mais je n'ai pas trouvé de description de mon problème exact via Google. Toute aide appréciée, merci!

4 commentaires

Avez-vous essayé flex ? Pourriez-vous également nous fournir Jsfiddle ou quelque chose pour voir le problème.

C'est probablement enroulant ... Essayez:

Comme ci-dessus, certains CSS sur le TD sont probablement requis.

Merci à tous! Ajout Dans l'inspecteur a travaillé, je viens de regarder l'équivalent CSS et l'a ajouté à ma feuille de style. Voir la solution ci-dessous.

3 Réponses :

0
votes

Essayez d'ajouter 

table {
    table-layout: fixed;
}

td a, td img {
    display:inline-block;
    vertical-align:middle;
}

0 commentaires
0
votes

TD {Affichage: Flex; }

serait probablement la meilleure solution car elle s'appliquera dans les navigateurs modernes, mais n'est pas pris en charge dans IE jusqu'à ce que c'est-à-dire.

0 commentaires
1
votes

Merci tout le monde. Bonnes suggestions. En fin de compte, la réponse de Pckkins a fonctionné pour moi, mais je devais légèrement la modifier pour l'ajouter à ma feuille de style CSS. J'ai fini par utiliser ceci: xxx

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor