Я могу центрироваться <ул.> с выровненным по левому краю <литий> s?
Я хотел бы центрировать список выровненных по левому краю объектов.
Это - то, что я в настоящее время имею:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shrinkwrapped List</title>
<style type="text/css">
#wrapper {
margin: auto;
width: 500px;
border: solid 1px #CCCCCC;
}
#header {
text-align: center;
font-size: 200%;
}
#content {
text-align: center;
}
#content ul {
text-align: left;
font-size: 150%;
list-style-type: none;
margin: 20px auto;
padding: 0px;
border: solid 1px #666666;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Shrinkwrapped List
</div>
<div id="content">
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur</li>
<li>Adipiscing elit</li>
<li>Morbi odio</li>
<li>Mi blandit vehicula</li>
</ul>
</div>
</div>
</body>
</html>
Который производит страницу, которая похожа:
То, что я действительно хочу, похоже на это:
Я могу выполнить это путем добавления width: 200px; кому: #content ul но проблема состоит в том, что у меня есть много списков как это, и у них всех есть различные ширины.
Я хотел бы <ul> уменьшаться к содержанию, таким образом, это может центрироваться правильно. Или я иду об этом неправильным путем?
Спасибо за любую справку можно обеспечить.
Решение
Благодаря KennyTM и Magnar, вот решение:
Добавьте эти четыре строки к #content ulправила CSS:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
Я протестировал это в IE6, IE7, IE8 и Firefox 3.6. Результаты похожи на второе изображение выше, и список всегда соответствует к содержанию объектов.
4 ответа
Установите для использования
display: inline-block; . См. http://jsbin.com/atizi4 .
Обратите внимание, что встроенный блок не поддерживается (полностью) для IE ≤7.
Я бы посмотрел на использование CSS и поставил margin: 0 auto в с контейнером максимальной ширины.
Попробуйте это. Это связано с несовместимостью, но я действительно не знаю, как старые браузеры обрабатывают поля, отступы и все такое, поскольку я работаю только с новыми. Это включает лишь некоторые незначительные изменения в вашем CSS.
/* I didn't style the other parts, so I'm taking them out to save space. */
#content {
margin: 0 auto;
}
#content ul {
border-top: solid 1px #666666;
border-bottom: solid 1px #666666;
text-align: left;
font-size: 150%;
list-style-type: none;
margin: 20px auto;
padding: 0px;
width: 202px;
}
#content li {
border-left: solid 1px #666666;
border-right: solid 1px #666666;
margin: 0 auto;
padding: 0;
width: 200px;
}
Edit: Я хочу уточнить, что я изменил. Я изменил способ выравнивания контента, но, честно говоря, вы можете изменить это обратно, я не думаю, что это окажет влияние.
Первоначально я установил фиксированную ширину и центрировал ваш элемент li , для которого у вас не было стиля. Это просто центрировало контент. Граница, которую вы поместили, была на ul , поэтому она была очень широкой, но если мы поместим ее в li , то у нас будет много прямоугольников. Итак, я разделил стиль границы. Причина, по которой #content ul имеет ширину 202 пикселя, заключается в том, что границы учитываются вне ширины.
Я надеюсь, что объяснение прояснило, почему это сработало. Удачи! Я тестировал это в Google Chrome.
Вы, вероятно, сможете принять мой предыдущий ответ . Встроенный блок для IE, display: table для современных браузеров. Возможно, потребуется явно указать тип стиля списка.
Редактировать: Поскольку это список, можно обойтись встроенным блоком в ul , а не отображать: table. Вам необходимо объявить в отдельном правиле, display: inline; после inline-block для IE.