8

これは非常に単純だと思いますが、次のようにHTMLで小さな空のインラインボックスのセットを描画しようとしています。

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

以前は、単純な.gif画像を以前に作成しましたが、ブラウザーの表示が拡大または縮小されるため、ぼやけて見えました。

<span>heightただし、インライン要素であることは、およびwidthプロパティを尊重しません。そしてもちろん、を使用<div style="display:inline;...すると、それらのプロパティを尊重しないという点で同じ動作を示します。

CSSの方法を提案していただけますか？

更新 次のことを想定します。フロートすると、テキストの右または左に結合し、ブラウザの幅に基づいてテキストにインライン化する必要があります。＆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>
4

10 に答える 10

15

heighthasLayoutプロパティをwidth持つ要素にのみ適用できます。デフォルトでは、SPAN 要素はこのプロパティを実装していません。

inline-block はすべての主要なブラウザーで正しく機能するとは限らないため、padding-dimension トリックを使用することをお勧めします。

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

font-sizeグローバルであるため、寸法を少し変更する必要がある場合があり、ボックスの実際のサイズに影響を与える可能性がありますfont-family。line-height

編集：空のボックスの 描画は私が見逃したビットですが、とにかく私のコードからは明らかだと思います。そうでない場合、これは別の例です。

<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>.

そして、このコードはこれを出力として生成します: 代替テキスト http://img413.imageshack.us/img413/5865/boxes.png

また、&nbsp;すべてのスパンを内部に配置しているため、このトリックはすべてのブラウザーで機能します。

于 2009-11-17T17:48:30.030 に答える
5

css display パラメータを試すことができますinline-block。しかし、あなたの走行距離はこれとは異なります。

display: inline-block

インライン ブロックはインライン (つまり、隣接するコンテンツと同じ行) に配置されますが、ブロックとして動作します。

于 2009-11-17T17:47:12.207 に答える
4

他の人の回答には正しいインライン スタイルの構文が含まれていますが、明示的に指摘したいと思います。

元のスタイル ルールは次のようになります。

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

次のようになります。

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

等号は、そのような CSS 構文には属しません。そこで必要なのはコロンです。

display:inline-block他の人が示唆したように、それはスパンとともに、私にとってはうまくいきました. このような：

    <span style="border:1px solid black;height:10px;width:17px;display:inline-block;"></span>
于 2012-06-21T14:53:10.577 に答える
3

を使用できますdisplay: inline-block。ただし、これは IE 6 などの古いブラウザでは機能しません。

アイテムを配置する場所に応じて、次のことができますdisplay:block; float:[left or right]

于 2009-11-17T17:48:16.933 に答える
3

このページにはたくさんの良い提案があります。しかし、GIF を使用しようとしたときに、グラフィックの境界線の部分でしたか?

border:1px solid blackCSS でサイズを変更して画像に適用できる透明な 1x1 gif を使用するのはどうですか。ボーダーを画像の一部として組み込んでみると、引き延ばすとぼやけて見えることがわかります。しかし、必要なスタイル設定が他にない限り、CSS ボーダー付きの透過 GIF は十分に見栄えがするはずです...

幸運を！

于 2009-11-18T02:01:48.973 に答える
2

そうです、スパンは幅と高さを尊重しませんが、パディングを尊重します。

ボックスの幅を簡単に設定して、左および/または右のパディングを指定できます。

空のスパンには高さがあるように見えるため、高さは少しトリッキーなので、font-size を 0 に設定する必要があります。

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

そしてもちろん、IE7 (およびおそらく IE6) では動作しません。少なくとも IE7 互換モードでは、ボックスが空になると魔法のようにボックスが消え、改行なしのスペースを入れると下の境界線が表示されません (めちゃくちゃになります)とにかく幅）...

于 2009-11-18T01:53:11.183 に答える
1

width: 17pxインラインまたはインラインブロック要素では機能しないようです。しかし、順番に、ブロック要素にトリックを作成し、それらを経由してインライン要素として表示させてみませfloat: leftんか？

これは私が試したことです：

<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>
于 2012-06-16T01:45:03.490 に答える
1

私はこれがうまくいくと信じています。

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

クロスブラウザで動作することは間違いありません

于 2009-11-18T10:16:59.783 に答える
0

どうですか 

<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>
于 2009-11-17T17:52:12.510 に答える