我有一个ul
列表,其中包含一些li
元素,我将它们浮动到左边。目前看起来如下;
| A | B | C | D | E<空格> |
我希望它是
| A | B | C | D | E |
是页面的中心,内容也应该居中
HTML
<div class="profile-content">
<ul class="content-btn">
<li>
<div class="digits">83</div>Followers
</li>
<li>
<div class="digits">1507</div>Tweets
</li>
<li>
<div class="digits">234</div>Friends
</li>
<li>
<div class="digits">51</div>Likes
</li>
<li>
<div class="digits">42</div>Gits
</li>
</ul>
<div class="clear"></div>
</div>
CSS
.content-btn {
width:100%;
margin: 0 auto;
}
.profile-content ul li {
float: left;
padding: 5px 8px;
text-align: center;
border-right: 1px solid #eeeeee;
border-left: 1px solid #ffffff;
}
.profile-content ul li .digits {
font-weight: bold;
font-size: 16px;
}
答案 0 :(得分:2)
添加.profile-content{text-align:center}
并且浮动 li
个元素,使用display:inline-block;
注意:HTML标记中没有.profile-card
,因此我将其从CSS选择器中删除。
.profile-content ul li{...}
.profile-content ul li .digits{...}
答案 1 :(得分:1)
.content-btn {
width:100%;
margin: 0 auto;
}
.content-btn li{
float: left;
padding: 5px 8px;
text-align: center;
border-right: 1px solid #eeeeee;
border-left: 1px solid #ffffff;
list-style:none;
}
.content-btn li:first-child{
border-left: 1px solid #eeeeee;
}
.profile-card .profile-content ul li .digits {
font-weight: bold;
font-size: 16px;
}
.clear{
clear:both;
}
答案 2 :(得分:0)
jsfiddle.net/g33HN /
查看此链接。我希望对你有所帮助