Question

例如：

<!-- make sure the link block fulfill the whole container -->
a {display:block;float:left;border:1px solid #ccc; width:48%}

<!-- work great in width:400px; -->
<div id=container1 style="width:400px">
  <a href="" >first element</a>
  <a href="" >second element</a>
</div>

<!-- not good! no enough space for second link block in my situation test in firefox-->
<div id=container1 style="width:200px">
  <a href="" >first element</a>
  <a href="" >second element</a>
</div>

那么，有没有办法让它们在不同宽度的容器中并排完成并对齐！

非常感谢!!

Answer 1

看起来你正在制作一个链接列表 - 如果是这种情况，你应该使用<div> <ul>标签<li>和{{1} {而不是<a>}在里面。

如果您这样做，可以将width / float规则应用于<li>，并将border和display: block应用于{<a> 1}}标签。

我将您的width更改为50%，因为这显然是您要实现的目标。

Live Demo

以下两种替代解决方案仅适用于现代浏览器/ IE8 +：

您可以使用outline属性代替border 见：https://developer.mozilla.org/en/CSS/outline
Live Demo
您可以使用box-sizing: border-box 见：https://developer.mozilla.org/en/CSS/box-sizing
Live Demo

Answer 2

设置保证金：0;填充：0;对于container1和标签。这可能是问题。在

如何使两个元素在不同宽度的容器中并排排列？

2 个答案: