Question

我想制作这个下拉菜单：

       |  Heading
----------------
action |  Item
action |  Item
action |  Item
action |  Item

action可以是“更改”，Item可以是“用户”。从语义上讲，拥有这个HTML是有意义的：

<h3>Heading</h3>
<dl>
  <dt>action</dt>
    <dd>Item</dd>
  <dt>action</dt>
    <dd>Item</dd>
</dl>

但据我所知，没有办法让动作和物品对齐，因为我们不想要固定的高度或宽度。

显而易见的是使用<table/>，但由于这不是表格数据，因此非常难看。我可以在不使用HTML表的情况下创建此设计吗？谢谢你的时间。

Answer 1

您实际上可以将dt和dd与float:left对齐，如下所示：

dt {
  float:left;   
}

请参阅this jsFiddle

Answer 2

有时您必须使用<table>。直到有人建议别的东西

Answer 3

好的，这就是它的运作方式

<ul>

<li>
    <span class="action">"Put Action Here"</>
    <span class="item>"Put Item Here"</>
</li>
<li>
    <span class="action">"Put Action Here"</>
    <span class="item>"Put Item Here"</>
</li>
<li>
    <span class="action">"Put Action Here"</>
    <span class="item>"Put Item Here"</>
</li>

</ul>

然后在CSS中你可以定位它们：

.action {float:left;}
.item {float:right;}

刚刚在小提琴上尝试过，它的效果非常好！

没有表的两列下拉列表

3 个答案: