Как центрировать это <ul>? - PullRequest
Новая
       27

Как центрировать это <ul>?

0 голосов
/ 09 марта 2011

Пока у меня есть этот код: 

function changeGeoLoc($a,$b,$c){
echo "<ul style='list-style-type: none; display:inline;'>";

while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";

}

, который производит это:

Product of the above code

Кто-нибудь знает, как сделать вышеупомянутое по центру так, чтобы оно было посередине?

Любые идеи приветствуются.

Thankyou

Обновление: Я пробовал стилизовать как блок и выполнить маржу: 0 авто с фиксированным значением, но это проблема, мне нужно растянуть его на 100% ширины, потому что поля IP, Город, Регион, Название страны и Код страны будут заполняется через сервисы GeoLoc автоматически, поэтому фиксированная ширина, скажем, 500px, недостаточно велика, поэтому она должна быть всей ширины, я хочу, чтобы она была центрирована, потому что если кто-то просматривает мою веб-страницу, то там информация не использует всю ширину, которую она выглядеть лучше по центру. Я надеюсь, что это имеет смысл .

Ответы [ 3 ]

2 голосов
/ 09 марта 2011

Попробуйте это: 

<ul style='list-style-type: none; display:block; width:500px; margin:0 auto;'>
1 голос
/ 09 марта 2011

Если вы хотите центрировать содержимое UL без предоставления фиксированной ширины, возможно, самый простой способ - это: 

function changeGeoLoc($a,$b,$c){
echo "<ul style='list-style-type: none; text-align: center;'>";

while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";

}
0 голосов
/ 09 марта 2011

Оберните ul в div и добавьте этот CSS: 

.className {
    margin:0 auto;
}

HTML: 

<div class="className">
<ul style='list-style-type: none; display:inline;'>
<li style='list-style-type: none; display:inline; padding-right:5px;'>Stuff</li>
</ul>
</div>

Измените стиль ul на block

...