如何使兩個元素並排放置在不同寬度的容器中？

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

Answer 2

集餘量：0;填充：0;爲container1和一個標籤。這可能是問題。在