как центрировать UL на моей странице? - PullRequest
Новая
       2

как центрировать UL на моей странице?

0 голосов
/ 19 ноября 2010

у нас проблема с тем, чтобы сделать верхние блоки кнопок в верхней части страницы идеальными для центра.

вот ссылка.

nick.georates.net / selectcountry.html

Можете ли вы дать подсказку, как в CSS настроить так, чтобы кнопки были посередине для любого разрешениястраница ????

заранее спасибо

Ответы [ 4 ]

2 голосов
/ 19 ноября 2010

ul с class = "shortcut-buttons-set" наследует отступ слева: 40px; попробуйте переписать это в классе "набор ярлыков кнопок"

0 голосов
/ 19 ноября 2010

Дайте элементу ul ширину - в этом случае это будет 600 пикселей, так как у вас есть 5 кнопок * ширина 105 пикселей и поле 15 пикселей для каждой кнопки.Удаление набора отступов для 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 должна теперь составлять 585 пикселей.

0 голосов
/ 19 ноября 2010

Заключите ваш элемент UL в DIV с шириной 100% 

<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;
}

и удалите свойство left: 25% и right: 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;
}
0 голосов
/ 19 ноября 2010

Поскольку у вас есть пять <li>, вы можете установить их ширину как 20%, тогда как margin:auto ссылки будут отображаться в центре. 

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