[英]How to center a List(ul)
I have a ul
List that contain some li
elements and I float them to left. 我有一个包含一些li
元素的ul
列表,然后将它们浮动到左边。 It currently looks like below; 当前如下所示;
| | A | A | B | B | C | C | D | D | E < space empty>| E <空格为空> |
I want it to be 我希望它成为
| | A | A | B | B | C | C | D | D | E | E |
that is center on the page and contents should be centered too 在页面上居中,内容也应居中
HTML 的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 的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;
}
Add .profile-content{text-align:center}
and istead floating the li
elements, use display:inline-block;
添加.profile-content{text-align:center}
而不是浮动 li
元素,请使用display:inline-block;
Note: there is no .profile-card
in your HTML markup so I removed it from the CSS selector. 注意:您的HTML标记中没有.profile-card
,因此我将其从CSS选择器中删除了。
.profile-content ul li{...}
.profile-content ul li .digits{...}
.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;
}
jsfiddle.net/g33HN/ jsfiddle.net/g33HN/
See this link. 请参阅此链接。 i hope this help for you 希望对您有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.