两列没有表

下拉我想使这个下拉菜单：两列没有表

 | 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表格的情况下创建此设计吗？感谢您的时间。

来源

2011-08-30 Znarkus

如果限制'ul'的宽度并将'li'移动到左侧，则可以实现所需。 http://jsfiddle.net/cudNX/ – Joonas

@洛莱罗：对不起，我不能限制宽度，需要它是动态的。 – Znarkus

我可以很容易地理解为什么你想要高度是动态的，但为什么宽度？ – Joonas

有时你必须使用一个<table>。直到有人提出别的

来源

2012-08-23 11:56:07 Znarkus

实际上，你可以对齐dt和dd与float:left这样的：

dt { 
    float:left; 
}

见this jsFiddle

来源

2011-08-30 08:56:33

嗨，谢谢，我想我需要澄清一件事：我需要它是可拉伸的，就像一张桌子一样。我需要“列”来垂直和水平对齐。在你的小提琴中，如果你把第一个“动作”改为“更长的动作”，我需要两个'

'具有相同的宽度，而他们不是。 – Znarkus

确定，所以继承人它会如何工作

<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;}

刚在小提琴和它美丽的工作！

来源

2015-05-08 00:58:46 jshariar

如果.action和.item的高度不一样，我想这会失败吗？ – Znarkus

@Znarkus让它变成同样的高度---这样我们都很开心..而不是使用'span'尝试使用'div'并且使它们的高度相同 - 您可能需要花一点时间才能找到对齐的位置由它会到达那里。 – jshariar

从问题：“但据我所知，没有办法使行动和项目对齐，因为我们不想要固定的高度或宽度。” – Znarkus

回答

相关问题