html - 如何使两个元素在不同宽度的容器中并排对齐？

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> 标记和 <a>里面。

如果您这样做，您可以申请 width/float <li> 的规则相反，并应用 border和 display: block到 <a>标签。

我改变了你的width至 50% ，因为这显然是您要实现的目标。

Live Demo

---

这里有两个仅适用于现代浏览器/IE8+ 的替代解决方案:

1. 您可以使用 outline属性而不是 border .
   请参阅:https://developer.mozilla.org/en/CSS/outline
   Live Demo

2. 您可以使用 box-sizing: border-box .
   请参阅:https://developer.mozilla.org/en/CSS/box-sizing
   Live Demo