我正在尝试创建一个框,其中包含顶部的图片和底部的两个按钮。这两个按钮必须保持内联和居中(至少水平)。
这是 HTML 代码:
<div id="box1">
<p>Text Text Text Text Text Text Text Text</p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div id="popinfo2">
<div>
<img src="http://imageenvision.com/450/18963-sweaty-woman-skipping-or-dancing-during-cardio-exercise-at-the-gym-clipart-by-djart.jpg">
</div>
<div>
<ul>
<li><a href="#">P</a></li>
<li><a href="#">P</a></li>
</ul>
</div>
</div>
这是 CSS:
body{
background: sandybrown;
height: 300px;
width: 90%;
}
#box1{
position: relative;
background: mediumseagreen;
padding: 0; margin: 0;
width: 60%;
height: 100%;
float: left;
}
#popinfo2{
position: relative;
background: plum;
height: 100%;
width: 40%;
float: left;
}
#popinfo2 div{
position: relative;
background: lightseagreen;
padding: 0;
display: block;
margin: auto;
vertical-align: middle;
}
#popinfo2 div:first-of-type{
width: 35%;
height: 75%;
}
#popinfo2 div:nth-of-type(2){
width: 100%;
height: 25%;
}
#popinfo2 div img{
background: aliceblue;
position: relative;
padding: 0; border: 0;
display : block;
margin: auto;
vertical-align: middle;
width: 100%;
height: 100%;
}
/*#popinfo2 div div{
background: dodgerblue;
height: 50%;
width: 80%;
padding: 0; margin: auto;
}*/
#popinfo2 div ul{
position: relative;
background: yellow;
float: left;
width: 100%;
height: 100%;
margin: 0; padding: 0;
text-align: center;
}
#popinfo2 div ul li {
position: relative;
float: left;
list-style: none;
position: relative;
padding: 0.5em;
margin: auto;
}
#popinfo2 div ul li a {
float: left;
padding: 0.5em 3.5em;
text-decoration: none;
color: white;
background: brown;
width: 2em;
}
我找到的唯一方法是在 li 标签内插入左边距。我不太喜欢它,因为它需要使用百分比折扣。
最佳答案
你应该使用display:inline-block
而不是 float
对于 <li>
如果你想水平居中:
http://codepen.io/anon/pen/rKBeE
float kills display and send things to the extrem right or left of its container ,它不再完全处于流动状态。
关于CSS:水平对齐列表的两个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21079169/