Создать горизонтальный стек

0

Я создаю веб-сайт и пытаюсь собрать четыре элемента div бок о бок (по горизонтали)

http://i40.tinypic.com/28tkuq8.png

Образ выше, как он появляется в данный момент.

И вот как я хочу это посмотреть: http://i44.tinypic.com/2h3v8ue.png

Это мой HTML-код, который я использую:

<div id="linkscontainer" align="center">
    <div id="1">
        <a href="link">1</a>
    </div>
    <div id="2">
        <a href="link">2</a>
    </div>
    <div id="3">
        <a href="link">3</a>
    </div>
    <div id="4">
        <a href="link">4</a>
    </div>
</div>

И мой CSS:

#linkscontainer {
    marin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 60px;   
}

#1 {
    background-color: #3B5998;
    height: 60px;
    width: 25%;
    font-family: 'Nixie One', cursive;
    color: #F0F0F0;
    font-size: 24px;
    text-align: center;
    line-height: 60px;      
}

#2 {
    background-color: #00B5B5;
    height: 60px;
    width: 25%;
    font-family: 'Nixie One', cursive;
    color: #F0F0F0;
    font-size: 24px;
    text-align: center;
    line-height: 60px;      
}

#3 {
    background-color: #F78F10;
    height: 60px;
    width: 25%;
    font-family: 'Nixie One', cursive;
    color: #F0F0F0;
    font-size: 24px;
    text-align: center;
    line-height: 60px;      
}

#4 {
    background-color: #EF0E11;
    height: 60px;
    width: 25%;
    font-family: 'Nixie One', cursive;
    color: #F0F0F0;
    font-size: 24px;
    text-align: center;
    line-height: 60px;      
}

Любая помощь очень ценится :)

благодаря

  • 0
    Используйте #1,#2,#3,#4{display:inline-block} .
Теги:
css-float

2 ответа

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

div является элементом уровня block по умолчанию, чтобы собрать их рядом друг с другом, вам нужно либо их float, либо вам нужно использовать display: inline-block;

Примечание. Значения id недопустимы, вы не можете запустить id с номером.

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

#linkscontainer > div {
   float: left;
}

Я изменил размеры до 25% до 20% чтобы идеально соответствовать контенту.

Если вы собираетесь display: inline-block; чем вам нужно искать исправление белого пространства, если вы собираетесь с float, чем не забудьте очистить их, используя clear: both; имущество.

Предложение. Похоже, вы создаете меню навигации, поэтому лучше использовать элементы ul и li вложенные в nav.

Поделиться
  • 1
    +1 за заметку.
  • 1
    @ Радди спасибо и это было важно :)
Показать ещё 2 комментария
2

У вас есть два варианта: либо плавать элементы, либо изменять их для отображения в строке, используя:

float:left; -или- display:inline; -или- display:inline-block;

Я рекомендую вам взглянуть на эту статью о плавающей, и это один о встроенных элементах (встроенный блок).

Эти два свойства достигнут результата, который вы после, но их поведение и назначение varies- убедитесь, что вы выбрали наиболее подходящий.

Элементы div по умолчанию являются блочными (они вызывают "перерыв" в вертикальном содержимом), изменяя их, чтобы заставить их отображать встроенные удаляет этот разрыв, поэтому последующее встроенное содержимое вложенно смежно.

Установив float, вы вызываете, чтобы предыдущий/следующий контент обходил вокруг element-, в этом случае содержимое также перемещается так, чтобы оно выглядело рядом.

Поделиться
  • 0
    Черт возьми, ты снова побил меня ... +1 -.-
  • 1
    @Ruddy ... извинений!
Показать ещё 1 комментарий

Ещё вопросы

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