调整浏览器窗口大小时，li元素重叠

Razer 发表于 Dev

剃须刀

我在进行网站设计时遇到了一些问题。我尝试了大约2个小时，但似乎无法理解为何填充底部无法正常工作。好吧，这是元素的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-bottom，但这似乎无济于事？

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

谢谢

显示它们inline-block，它将正常工作，如果需要，您可以在底部添加一些边距margin-bottom: 40px;

现场演示

.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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。