0

在互联网上浏览了一段时间后，我还没有找到一种方法来成功地将无序列表放在我的页面上。

这是列表的 HTML：

<div id="buttons">
<ul>
<li><a href="http://www.twitter.com/tommaxwelll"><img src="twitter.png" alt="twitter-icon" /></a></li>
<li><a href="http://www.github.com/tommaxwell"><img src="github.png" alt="github-icon" /></a></li>
<li><a href="http://www.instagram.com/tommaxwelll"><img src="instagram.png" alt="instagram-icon" /></a></li>
<li><a href="http://www.facebook.com/tommaxwelll"><img src="facebook.png" alt="facebook-icon" /></a></li>
</ul>
</div>

这是其他 SO 帖子推荐的 CSS：

#buttons {
float: right;
position: relative;
left: -50%;
top:140px;
text-align: left;
}

#buttons ul {
list-style-type: none;
position: relative;
left: 50%;
}

#buttons li {
float: left;
position: relative;
}

列表项上的 float:left 是我保持列表水平的方式。您还可以在此处查看相关网站：http ://www.tommaxwell.me

4

4 回答 4

2

检查以下http://jsfiddle.net/QGgdR/

#sitecontent {
position: relative;
display: block;
margin: 140px auto 20px;
width: 100%;
max-width: 650px;
margin: 140px auto 0;
padding: 0 17px 4px 17px;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(191, 191, 191, 1);
}
#buttons {
margin: 20px auto 0;
display: block;
height: 50px;
}

#buttons ul {
margin: 0 auto;
padding: 0;
display: table;
list-style: none;
}

#buttons li {
float: left;
}
于 2013-01-07T06:36:07.300 回答
0

像这样改变你的CSS

#buttons {
display: inline;
position: relative;
right: 37px; //change this to exactly center your ul 
text-align: left;
top: 140px;
}

#buttons ul {
display: inline-block;
list-style-type: none;
position: relative;
}

和你的 html

<center><div id="buttons">
<ul>
<li><a href="http://www.twitter.com/tommaxwelll"><img src="twitter.png" alt="twitter-icon" /></a></li>
<li><a href="http://www.github.com/tommaxwell"><img src="github.png" alt="github-icon" /></a></li>
<li><a href="http://www.instagram.com/tommaxwelll"><img src="instagram.png" alt="instagram-icon" /></a></li>
<li><a href="http://www.facebook.com/tommaxwelll"><img src="facebook.png" alt="facebook-icon" /></a></li>
</ul>
</div></center>
于 2013-01-07T06:35:07.460 回答
0

要使浮动列表居中，请尝试此操作。看起来有点奇怪但有效：

#buttons {
    top:140px; /* your specific code */ 
    float: left;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#buttons ul {
    clear: left;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    left: 50%;
    text-align: center;
}

#buttons ul li {
    display: block;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    right: 50%;
}
于 2013-01-07T06:38:13.440 回答
0

你应该这样尝试：

无需使用position:relative;和position:absolute;

#buttons{
  display:table;
  margin:0 auto;
}

JsBin 链接

于 2013-01-07T06:44:15.040 回答