li элементы перекрываются при изменении размера окна браузера

Question

У меня есть небольшая проблема с созданием дизайна сайта. Я пробовал, как 2 часа, и просто не могу понять, почему padding-bottom не будет работать. Ну, вот HTML элемента:

<div class="Element"> 
    <div class="HeadingL">Choose size</div> 
    <div class="click1"> 
     <ul> 
      <li><a href="#">10cm $175</a></li> 
      <li><a href="#">15cm $295</a></li> 
      <li><a href="#">20cm $395</a></li> 
     </ul> 
    </div> 
</div> 

А вот соответствующий CSS:

.click1 ul { 
    padding: 0; 
    list-style-position: inside; 
    list-style-type: none; 
} 
.click1 li { 
    display:inline; 
    padding: 5px; 
    margin-right:5px; 
    border-color:green; 
    border-style: solid; 
    border-width: 1px; 
    border-radius: 5px; 
    white-space: nowrap; 
} 
.click1 li:hover { 
    border-color:red; 
} 
.Element { 
    border-bottom: 1px solid #000; 
    width:100% 
} 
.HeadingL { 
    padding-top:10px; 
    text-transform: uppercase; 
    font-family:'Open Sans', sans-serif; 
} 

Таким образом, проблема в том, что если я изменить размер окна, что не хватает места для всех трех кнопок, один перемещает линию вниз. Так оно и должно быть, но границы элементов перекрываются, и я попробовал padding-botton и margin-bottom, но это, похоже, не помогает?

http://i.stack.imgur.com/1ZVqd.png

Благодаря

Answer 1

отображать их inline-block и он будет работать должным образом, вы можете добавить краю дна, если вы хотите margin-bottom: 40px;

LIVE DEMO

.click1 li { 

display:inline-block; 
padding: 5px; 
margin-right:5px; 
border-color:green; 
border-style: solid; 
border-width: 1px; 
border-radius: 5px; 
white-space: nowrap; 
margin-bottom: 40px; 
}