0

文字列「field1 field2 field3」を1行で表示する必要があり、field1、field2、およびfield3はN個の文字になります。

文字列を表示するにはどうすればよいですか?

<style>
#div1{
    width:1000px;
    border:1px solid;
}           
.field1{
    display:inline;
    width:auto;
}
.field2{
    display:inline;
    width:auto;
}
.field3{

    width:auto;
}
        </style>

        <div id="div1">
            <div class="field1">Field1(with N number of characters)</div>
            <div class="field2">Field2(with N number of characters)</div>
            <div class="field3">Field3(with N number of characters)</div>
        </div>
4

4 に答える 4

1

すべてのブロック レベルの子 (最後の を含む) をインライン レイアウトにすることに加えdivて、行の折り返しを防ぐ必要がある場合があります。最も簡単な方法として、スタイル シートを次のように置き換えることができます。

#div1 {
  white-space: nowrap;
  border: 1px solid;
}           
#div1 div {
  display: inline;
}

他の理由がある場合は要素に幅を設定できますが、上記のコードはそのような設定がなくても機能します。

于 2012-10-19T14:30:38.237 に答える
0

Svenが指摘したように、スパンを使用できます。CSS を変更しなければ、すべてのアイテムが隣り合わせに表示されます。

他のオプションは、次のように div をフロートすることです。

    <div id="div1">
        <div class="field1 fl">Field1(with N number of characters)</div>
        <div class="field2 fl">Field2(with N number of characters)</div>
        <div class="field3 fl">Field3(with N number of characters)</div>
        <div class="clear"></div><!-- This makes sure you don't float unintended elements in older browsers -->
    </div>

これをcssに追加します（また、display: inline;ルールを削除します）：

.fl {
  float: left;
}

.clear {
  clear: both;
}

field1、field2、またはのコンテンツfield3が動的である場合 (たとえば、javascript を使用してテキストを別のものに置き換える場合)、div を使用することをお勧めします。ただし、要素内に配置するのがテキストだけであることが確実な場合は、スパンを使用しても問題ありません (例):

    <div id="div1">
        <span class="field1">Field1(with N number of characters)</span>
        <span class="field2">Field2(with N number of characters)</span>
        <span class="field3">Field3(with N number of characters)</span>
    </div>
于 2012-10-19T14:29:28.890 に答える
0

私はこれがあなたが欲しいと思います

<style>
#div1{
width:auto;
border:1px solid;
 }           
.field1{
display:inline;
width:auto;
}
 .field2{
display:inline;
width:auto;
}
.field3{
display:inline;
width:auto;
 }
    </style>

    <div id="div1">
        <div class="field1">Field1(with N number of characters)</div>
        <div class="field2">Field2(with N number of characters)</div>
        <div class="field3">Field3(with N number of characters)</div>
    </div>​
于 2012-10-19T14:26:50.047 に答える
0

アイテムごとに個別のクラスは必要ありません。すべてを一列に並べる場合は、1 つのクラスを使用するだけでジョブを実行できます (後で特定のクラスを参照する場合を除きます)。:after は、行の後に来るものが同じ行に表示されないようにします。

<style>
    .field {
        display: inline-block;
    }
    .field:after{
        display:block;
        height: 0;
        content: '';
        clear: both;
    }
</style>

<div id="div1">
    <div class="field">Field1(with N number of characters)</div>
    <div class="field">Field2(with N number of characters)</div>
    <div class="field">Field3(with N number of characters)</div>
</div>
于 2012-10-19T14:33:38.850 に答える