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

Question

For example:

<!-- 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>

So, is there a way to make them all fulfill and align side by side in different width of containers!?

Thank you very much!!

Answer 1

It looks like you're making a list of links - if this is the case, you should use (instead of <div> ) the <ul> tag with <li> and <a> inside.

If you do this you can apply the width / float rules to the <li> instead, and apply the border and display: block to the <a> tag.

I changed your width to 50% , as that's obviously what you're trying to achieve.

Live Demo

---

Here are two alternate solutions which will work only in modern browsers/IE8+:

1. You can use the outline property instead of border .
   See: https://developer.mozilla.org/en/CSS/outline
   Live Demo

2. You can use box-sizing: border-box .
   See: https://developer.mozilla.org/en/CSS/box-sizing
   Live Demo

Answer 2

Set margin:0; padding:0; for both container1 and a tags. That could be the problem.in