Question

我有这个标记

<dt id="dt0">    &nbsp;                                 </dt>
<dd id="dd0dd">  <textarea id="dd0"></textarea>         </dd>

<dt id="dt1">    &nbsp;                                 </dt>
<dd id="dd1dd">  <input id="dd1" type="hidden">         </dd>

<dt id="dt2">    <label for="dd2">Dd2 Label:</label>    </dt>
<dd id="dd2dd">  <input id="dd2" type="text">           </dd>

<dt id="dt3">    <label for="dd3">Dd3 Label:</label>    </dt>
<dd id="dd3dd">  <input id="dd3" type="text">           </dd>

<dt id="dt4">    <label for="dd4">Dd4 Label:</label>    </dt>
<dd id="dd4dd">  <input id="dd4" type="text">           </dd>

我需要浮动使它看起来像这样（注意dd1是隐藏元素）

_________________________________                ________________________
|                               |     Dd2 Label  |                       |
|                               |                |_______________________|
|                               |     
|                               |                ________________________
|                               |     Dd3 Label  |                       |
|                               |                |_______________________|
|                               |
|                               |                ________________________
|                               |     Dd4 Label  |                       |
|_______________________________|                |_______________________|

CSS并不是我真正喜欢的东西，但是我已经尝试了很多东西并且有一些工作，但它看起来仍然不正确。这是我现在拥有的CSS。

#dd0dd {
    float:left;
}
#dt1, #dt2, #dt3, #dt4{ 
    float:left; 
    clear:right; 
    width:80px; 
}
#dd1dd, #dd2dd, #dd3dd, #dd4dd {
    float:right;
    clear:right;
}

有人可以告诉我如何改进这个CSS以使其看起来正确。

编辑：我希望我可以更改标记以使用表格或不使用表格，但它是自动生成的，无法更改。

Answer 1

#dt1,
#dt0 {
    display: none;
}

#dd0dd {
    float:left;
}

#dt1, #dt2, #dt3, #dt4{ 
    float:left; 
    width:80px; 
}

#dd1dd, #dd2dd, #dd3dd, #dd4dd {
    clear:right;
}

设置边距等。

Answer 2

更新 - 看到您无法编辑html，请查看此仅限css的解决方案：http://jsfiddle.net/SebastianPataneMasuelli/csXPG/4/

它包含dl标记，需要为布局设置宽度

css浮动是css最令人困惑的概念之一（我教这些东西，这是向学生解释最难的事情之一）。但我向你保证，一旦你了解了css，你就再也不想再编码一个表了，除了表格很棒的表格数据之外。

Answer 3

您是否必须使用<dt>和<dd>标签？如果你要使用它们，你应该使用<dl>标签将它们全部包围起来，但是因为你希望你的文本框与你的标签并排而不是在它们下方缩进，所以它不会更容易在div中包围（你的标签和输入）？这将为您提供您正在寻找的布局。

Answer 4

像这样的某种憎恶可能会起作用，但它非常脆弱，各种宽度和高度都是用“小提琴直到它起作用”技术来确定的：

#dt0 {
    display: none;
}

#dd0 {
    height: 100px;
}

#dd0dd {
    float: left;
}

#dt1, #dt2, #dt3, #dt4{ 
    float: left; 
    clear: right;
    width: 80px; 
    margin-left: 100px;
}

#dd1dd, #dd2dd, #dd3dd, #dd4dd {
    float: right;
}

这适用于Safari中的jsfiddle.net，其他任何地方都可以使用YMMV。我现在感觉很脏。

Answer 5

对于tableless CSS来说，如果你把它全部放在一张桌子上，你几周之前就已经完成了，那么你也不必对抗浏览器的不一致。

我们甚至有几个盟友：

这是一个关闭袖口解决方案：

<table>
  <tr><td rowspan=3>
    <dt id="dt0">    &nbsp;                                 </dt>
    <dd id="dd0dd">  <textarea id="dd0"></textarea>         </dd>
  </td></tr>
  <tr style='display:none'><td>
    <dt id="dt1">    &nbsp;                                 </dt>
    <dd id="dd1dd">  <input id="dd1" type="hidden">         </dd>
  </td></tr>
  <tr><td>
    <dt id="dt2">    <label for="dd2">Dd2 Label:</label>    </dt>
    <dd id="dd2dd">  <input id="dd2" type="text">           </dd>
  </td></tr>
  <tr><td>
    <dt id="dt3">    <label for="dd3">Dd3 Label:</label>    </dt>
    <dd id="dd3dd">  <input id="dd3" type="text">           </dd>
  </td></tr>
  <tr><td>
    <dt id="dt4">    <label for="dd4">Dd4 Label:</label>    </dt>
    <dd id="dd4dd">  <input id="dd4" type="text">           </dd>
  </td></tr>
</table>

浮动这些元素的正确方法是什么

5 个答案: