ul процентная ширина с рамкой

Question

У меня есть ul и таблица непосредственно ниже, и я хочу, чтобы 2 выстроились в линию. К сожалению, поскольку я обнаружил, что проценты не могут быть применены к границе, которую я имею, что делает ul слишком широким или узким, в зависимости от размера экрана.

Видимо, помещение вещей в контейнер должно сделать трюк, но я не мог заставить его работать. Какие-нибудь советы?

Это синяя граница, это преступник, показанный в jsfiddle здесь: http://jsfiddle.net/cemLkm5j/1/

HTML пример:

<ul class="nav"> 
     <li><a href="">Home</a></li><li><a href="">Couriers</a</li><li><a href="">Reviews</a></li><li><a href="">Retailers</a></li> 
</ul> 

<table> 
<tr> 
    <td> 
     test 
    </td> 
</tr> 

CSS:

.nav a { 
border-left: 0px solid !important; 
border-right: 5px solid !important;  
width: 44.6% !important; 
margin: 0px !important; 
padding: 0px !important; 
line-height: 30px !important; 
vertical-align: middle !important;  
} 

Answer 1

Используйте границы -box значение для th e box-sizing Недвижимость по вашим ссылкам. Таким образом, если вы добавите границу своему элементу, она будет включена в вашу ширину, поэтому вы можете просто использовать ширину: 50% по вашим ссылкам. Вот как это работает:

.nav a { 
    border-left: 0px solid !important; 
    border-right: 5px solid !important;  
    width: 50% !important; 
    margin: 0px !important; 
    padding: 0px !important; 
    line-height: 30px !important; 
    vertical-align: middle !important; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Кроме того, необходимо определить ту же ширину для навигации контейнера, 90%, так же, как в таблице:

.nav { 
    width: 90%; 
    margin: 0 auto !important; 
} 

Пример: http://jsfiddle.net/cemLkm5j/2/