Dessin vide inline boîtes de CSS?

Je suis sûr que c'est très simple, mais je suis en train de dessiner un ensemble de petits, vide, inline boîtes en HTML comme suit:

<span style="border:1px solid black;height=10px;width=17px"></span>

Plus tôt, a fait simple .images gif plus tôt, mais regardé floue que le navigateur affiche sont mis à l'échelle vers le haut ou vers le bas.

<span> toutefois être un élément inline n'honore pas le height et width propriétés. Et bien sûr, à l'aide de <div style="display:inline;... présente le même comportement en ce qu'il refuse ensuite de l'honneur de ces propriétés.

Pouvez-vous s'il vous plaît suggérer un CSS y?

Mise à jour
Supposons que celui-ci, si je flotte, il colle à la droite ou à la gauche du texte et j'en ai besoin incorporé au texte basé sur le navigateur de largeur, &c

<p>Lorem ipsum dolor sit amet, <INSERT BOX HERE> consectetur adipisicing 
elit, <INSERT OTHER BOX HERE> sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
Quel est le problème avec les éléments de bloc? Et où est le gif dans votre code?
Oh, tu veux dire "plus Tôt, a fait simple .gif images..." encore une fois, vous ne savez pas pourquoi vous ne pouvez pas utiliser les éléments de bloc, peut-être mettre à jour votre question avec cette information.
Tu ne peux pas utiliser les éléments de bloc et le flotteur droit?
De le définir comme block et float droit, il met à l'extrême droite de l'élément courant, pas en ligne avec le reste du texte.
Comment au sujet de flotter à gauche? (Peut-être que je ne suis pas à comprendre ce que vous essayez de faire....)

OriginalL'auteur Jé Queue | 2009-11-17

  1. 12

    height et width ne peut être appliquée aux éléments avec hasLayout de la propriété. DURÉE de l'élément par défaut ne permet pas de mettre en œuvre cette propriété.

    Parce que inline-block ne fonctionne pas correctement sur tous les principaux navigateurs, je vous conseille d'utiliser padding-dimension astuce:

    <span style="font-size:30px; padding-left:30px; background:red;">&nbsp;</span>

    Vous pourriez avoir besoin de jouer un peu avec les dimensions parce global font-size, font-family et line-height peut affecter la taille réelle de votre box.

    Edit:
    Dessin cases vides est le peu que j'ai manqué, mais je pense qu'il est tout à fait évident à partir de mon code, de toute façon. Si non, c'est un autre exemple:

    <style type="text/css">
.box1 { font-size:15px; font-family:Tahoma; padding-left:15px; border:1px solid red; overflow:hidden; }
.box2 { font-size:10px; font-family:Tahoma; padding-left:15px; border:1px solid green; overflow:hidden; }
.box3 { font-size:5px; font-family:Tahoma; padding-left:5px; border:1px solid blue; overflow:hidden; }
</style>

This is red box: <span class="box1">&nbsp;</span> and this is green box: <span class="box2">&nbsp;</span>.
And this is another box, this time it is blue: <span class="box3">&nbsp;</span>.

    Et le code produit de cette sortie:
    le texte d'alt http://img413.imageshack.us/img413/5865/boxes.png

    Et parce que nous avons mis &nbsp; à l'intérieur de chaque travée, cette astuce fonctionne sur tous les navigateurs.

    OriginalL'auteur rochal

  2. 5

    Vous pourriez essayer le css paramètre d'affichage inline-block. Mais votre kilométrage mon varient avec celui-ci.

    display: inline-block

    Une ligne de bloc est placé en ligne (ie.
    sur la même ligne que adjacentes de contenu),
    mais il se comporte comme un bloc.

    pour IE compatibilité uniquement utiliser inline-block sur les tags (ie. span) IE ignore inline-block pour les divs

    OriginalL'auteur Jordan S. Jones

  3. 3

    Vous pouvez utiliser display: inline-block. Si cela ne fonctionne pas dans les vieux navigateurs comme IE 6.

    Selon l'endroit où vous voulez que les éléments situés, vous pourriez faire display:block; float:[left or right]

    Citation de mode quirks: "IE 6/7 accepte la valeur uniquement sur des éléments naturels display: inline."
    Oh, dans ce cas, il sera probablement de travail ok, alors
    doit travailler pour <span> balises

    OriginalL'auteur JasonWyatt

  4. 3

    Beaucoup de bonnes suggestions sur cette page. Je me demandais, si, quand vous vous essayé d'utiliser un GIF, a la frontière de la partie de votre charte graphique?

    Comment sur l'utilisation d'un transparent 1x1 gif que vous pouvez taille avec CSS, puis appliquer border:1px solid black à l'image. Si vous avez essayé intégrant la frontière dans le cadre de l'image, je comprends l'étirement, il serait la cause de sembler floue. Mais un GIF transparent avec un CSS frontière look assez sympa, sauf si vous avez eu quelques autres style vous avez besoin sur elle...

    Bonne chance!

    Nice one........

    OriginalL'auteur Funka

  5. 3

    Les réponses des autres ont inclus le bon style en ligne syntaxe, mais je pensais que je le signale explicitement:

    Votre style original règles ressembler à ceci:

        <span style="border:1px solid black;height=10px;width=17px"></span>

    Que devrait ressembler à ceci:

        <span style="border:1px solid black;height:10px;width:17px"></span>

    Les signes "égal" n'appartiennent pas à la syntaxe css comme ça, les deux-points sont ce qui est nécessaire.

    Qui, avec display:inline-block sur la durée, comme d'autres personnes ont suggéré, a travaillé pour moi. Comme ceci:

        <span style="border:1px solid black;height:10px;width:17px;display:inline-block;"></span>

    OriginalL'auteur deargle

  6. 2

    Vous avez raison, span ne fait pas honneur à la largeur et la hauteur, cependant, il ne sorte de l'honneur de rembourrage.

    Vous pouvez définir la largeur de votre boîte facilement en lui donnant un côté gauche et /ou droit de rembourrage.

    La hauteur est un peu plus compliqué qu'un vide span semble avoir une hauteur de sorte que vous devez définir la taille de police 0.

    span.box {
    padding: 5px 8px;    //height 10, width 16
    font-size: 0px;
}

    Et bien sûr, il ne fonctionne pas dans IE7 (et probablement IE6), au moins dans IE7 en mode de compatibilité de la boîte disparaît comme par magie quand elle est vide et n'affiche pas la bordure du bas quand j'ai mis un espace insécable (qui bousille la largeur de toute façon)...

    span ignore la largeur et la hauteur comme il est destiné à être utilisé pour du contenu en ligne et d'avoir de la hauteur et la largeur serait de se débarrasser de cette, display:inline-block permettra de largeur et de hauteur pour être utilisés, mais uniquement sur les tags dans IE

    OriginalL'auteur jeroen

  7. 1

    Je crois que cela fonctionne.

     <span style="display:inline-block;border:1px solid #00ff00;width:150px;height:50px;"></span>

    assez sûr que ça va marcher croix-navigateur

    OriginalL'auteur andyface

  8. 1

    Il semble que width: 17px ne fonctionne pas sur inline ou inline-block éléments. Mais en retour, pourquoi ne pas faire des tours sur les éléments de bloc et de les laisser montre que les éléments en ligne via float: left?

    C'est ce que j'ai essayé:

    <html>
<head>
<style>
.container div {
    float: left;
    height: 20px;
}
</style>
</head>
<body>
<div class='container'>
    <div style='width: 20px; border: 1px solid red;'></div>
    <div>Text</div>
    <div style='width: 20px; border: 1px solid red;'></div>
</div>
<div style='clear: both'></div>

    OriginalL'auteur neuront

  9. 0

    Comment sur 

    <div>
    <div style="border: 1px solid #000; height: 10px; width: 17px; float: left"></div>
    <div style="border: 1px solid #000; height: 10px; width: 17px; float: left"></div>
    <br style="clear: both;" />
</div>
    Sur FF, qui attire tout de petites boîtes ~1x1 à l'extrême gauche de la ligne actuelle?
    "l'extrême gauche": dépend de l'endroit où vous placez le récipient. "1x1": probablement hérité de vos autres règles de la feuille de style, essayez de jouer avec elle dynamiquement (à l'aide de firebug.)

    OriginalL'auteur chelmertz

  10. 0

    Ne comprends pas très bien votre mise à jour, mais en général d'élaborer un ensemble de petits, vide, inline boîtes en HTML un tableau serait la méthode la plus simple donc je vais laisser ça ici au cas où ça aide.

    Simplement définir la table ...

       <table>
       <tr>
           <td id=one></td><td id=two></td><td id=three></td>
       </tr>
   </table>

    Puis le format de la table de données à l'aide de votre .css comme si ...

        tr{  height: 60px;}
    th, td{ width: 100px;}
    #one{   border:10px solid blue;}
    #two{   border:10px solid red;}
    #three{ border:10px solid green;}

    En fonction de comment vous voulez que le positionnement d'un texte, de l'onu format des cellules de tableau pourrait être approprié. Espérons que cette aide.

    OriginalL'auteur Simon