2

2つのテキストボックスを表示名と並べて1行に並べたいのですが、dl、dt、ddを使用しています。水平方向に並べるのに問題があります。この配置について、誰かがアイデアを教えてくれますか。ありがとうございます。

4

5 に答える 5

0

1行に2つのテキストボックスを揃える場合。以下はjsfiddleのデモです。私はあなたの質問からこれだけを理解することができます

Jsfiddleへのリンク

于 2012-06-22T09:12:05.827 に答える
0

あなたの正確なケースを知らずに、私は設定します

float:left;

ddとdtに。

http://jsfiddle.net/WFzfR/

編集：あなたのフィドルで、クリアを消去するだけです：左; .tmdtから

http://jsfiddle.net/3hqws/2/

于 2012-06-22T09:07:38.600 に答える
0

.tm dtの「clear：left」を削除すると、同じ行になります

そのように：http： //jsfiddle.net/kude9/1/

于 2012-06-22T09:13:29.360 に答える
0

display:inline通常、私の最初の試みです。それがどういうわけかうまくいかないか、理想的な解決策ではない場合、私はしばしばfloat:leftAlvaroが言うように使用します。

于 2012-06-22T09:20:44.103 に答える
0

すでにdisplay：inlineを定義しているので、.tm dt、ddクラスにfloat：leftを 定義する必要はありません。ブロック要素とインライン要素に精通しているといいのですが、インライン要素は水平形式で自動的に設定されます。一列に...

CSS

 .tm dt, dd
        {
            color:Black;
            margin: 0;
            padding: 0;
            height: 30px;
            line-height: 30px;
            display:inline;
            border:1px solid red;               
        }   
       .tm dt
        {
            padding: 0 5px 0 15px;
            text-align: right;
            opacity: 0.6;
            width: 100px;       
        }

HTML

<div class="tm">
  </dl>             
  <dt>Course </dt>              
  <dd>hello</dd>  


 <dt> Spl</dt>                
     <dd>hello</dd></dl></div>

デモを参照してください：-http：//jsfiddle.net/kude9/3/

于 2012-06-22T09:34:27.997 に答える