Question

我们遇到的问题是，页面顶部的按钮块是理想的中心。

这是链接。

nick.georates.net/selectcountry.html

你可以提示如何在css中进行调整，以便按钮位于页面的任何分辨率的中间位置????

事先感谢

Answer 1

带有class =“shortcut-buttons-set”的ul继承了一个padding-left：40px;尝试在“shortcut-buttons-set”类

中覆盖它

Answer 2

由于您有五个<li>，因此您可以将其宽度设置为20％，margin:auto链接将显示为中心。

li {
    margin:0;
    padding:0;
    width:20%;
    float:left;
}
a {
    width:103px;
    margin:auto;
}

Answer 3

给ul元素一个宽度 - 在这种情况下它将是600px，因为你有5个按钮* 105px宽度和每个按钮15px边距。删除ul上的填充集以及li上设置的左右值，并将ul元素设为此样式：

.shortcut-buttons-set {
    margin: 0 auto;
    padding: 0;
    width: 600px;
}

ul.shortcut-buttons-set li {
    float: left;
    font-weight: bold;
    margin: 0 15px 0 0;
    padding: 0 !important;
    text-align: center;
}

此外，您还需要使用:last-child删除最后15px的边距，以便按钮完全对齐。

.shortcut-buttons-set li:last-child {
    margin: 0;
}

考虑到这一点，ul的宽度现在应为585px。

Answer 4

将您的UL元素封装在宽度为100％的DIV中

<div style="width: 100%;">
    <ul class="shortcut-buttons-set">
        <li></li>
        <li></li>
        <li></li>
        <li></li>       
     </ul>
</div>

将此CSS应用于UL

.shortcut-buttons-set{
display:inline-block;
list-style:none outside none;
margin:0 auto;
padding:0;
}

并删除左边的属性：25％和右边：25％到你的LI元素。

ul.shortcut-buttons-set li{
background:none repeat scroll 0 50% transparent;
float:left;
font-weight:bold;
***left:25%;***
margin:0 15px 0 0;
padding:0 !important;
position:relative;
***right:25%;***
text-align:center;
}

如何在我的页面中居UL？

4 个答案: