Использование CSS вместо табличных функций в HTML

0

Как можно разместить список в центре страницы. В html вы можете создать таблицу и сделать ее, например, шириной таблицы 100%, а затем вы можете разделить каждый раздел. Но я хочу избавиться от этого и хочу больше сосредоточиться на моем CSS. Я создал div и мой css для списка, который выглядит следующим образом:

.list {
        margin-left: auto;
        margin-right: auto;
        width: 6em;
        background: white;
        position: absolute;
        height: auto;
        border: 1px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -border-radius: 10px;
        border-radius: 10px;
}

Edit: я уже создал неупорядоченный список и пометил его в div с именем класса "list". Мне просто нужно знать, как я могу поместить список в середине сайта. Мне жаль, что я недостаточно ясен.

  • 0
    Убедитесь, что в вашем .list есть display: block
  • 2
    Удалить position: absolute и оно будет отцентрировано. Попробуй здесь
Теги:

4 ответа

1
Лучший ответ

Ваш CSS выглядит отлично, просто удалите position: absolute; от него, и он будет сосредоточен отлично:

CSS

.list {
    margin: 0 auto;
    width: 6em;
    border: 1px solid red;
    border-radius: 10px;
}

Вы можете использовать сокращенную обозначение для полей здесь следующим образом: margin: 0 auto; , Это означает, что верхнее и нижнее поля установлены на 0 а влево и вправо установлены на auto.

демонстрация

Попробуйте перед покупкой

Поделиться
0

Посмотрите на css-дисплей: таблицы. что-то вроде http://ajaxian.com/archives/display-table

Поделиться
0

Что-то вроде этого должно сортировать вас: http://jsfiddle.net/hYFgp/

HTML

<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
<li>#4</li>
<li>#5</li>
</ul>

CSS

ul{
width: 200px;
border: 1px solid red;
margin: 0 auto;
padding: 0;
}
ul li{
text-align: center;
list-style-type: none;
}

Затем поиграйте со стилями, чтобы они выглядели точно так, как вы этого хотите. , ,

Поделиться
  • 0
    тот тоже работает конечно: D
  • 0
    Вы обнаружите, что с HTML + CSS будет много способов достичь тех же результатов. Не все верны, не все являются допустимыми кодами, и не все рассматриваются как «лучшие практики». , ,
0

Вы можете создать список <ul> и применить css. Это то, над чем я недавно работал

пример

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню