Выравнивание divs по горизонтали с помощью CSS-дисплея:

Я пытаюсь выровнять два divs по горизонтали. Мой список во втором div выравнивается по горизонтали, но два divs не могут выровняться горизонтально, как встроенные блоки. Любая помощь будет принята с благодарностью. Вот CSS и HTML код:Выравнивание divs по горизонтали с помощью CSS-дисплея:

CSS

#wrapper { 
margin:0 auto; 
width:100%; 
position:relative; 
} 
.navit { 
position:relative; 
margin-left: auto; 
margin-right: auto; 
width: 100%; 
height: 100%; 
display:inline; 
} 
.container-logo { 
display:inline-block; 
} 
.container-user { 
display:inline-block; 
} 
#user-nav-container ul li { 
display:inline; 
} 
#user-nav-container ul li a { 
background-color:#000000; 
color:#FFF; 
font-size:14px; 
} 
#user-nav-container ul { 
list-style-type:none; 
background-color:#000000; 
}

HTML

<html> 
<body> 
    <div id="wrapper"> 
     <header id="top"> 
      <div id="navbar" class="navit"> 
       <div id="logo-container" class="container-logo"><a href="http://www.site.com/" id="logo"> 
    <h1>ServiceMyResume.com</h1> 
       </a></div> 

       <div id="user-nav-container" class="container-user"> 
        <ul> 
        <li><a href="http//www.site.com">Site 1</a></li> 
        <li><a href="https://www.site.com">Site 2</a></li> 
        </ul> 
       </div> 
      </div> 
     </header> 
    </div> 
</body> 
</html>

Fiddle: http://jsfiddle.net/8TfzJ/

источник

2014-01-30 Blaine Hurtado

Я все еще не уверен, чего вы пытаетесь достичь? Вы хотите, чтобы все divs были выровнены по горизонтали? –

Вы хотите * заменить * те divs горизонтально и выровнять их * по вертикали * на их общей базовой линии? –

Я хотел бы горизонтально выровнять мои контейнеры с логотипом и пользовательскими навигационными контейнерами –

Избавиться:

#user-nav-container ul li { 
    display:inline; 
}

Это то, что вызывает ваши нав элементы, чтобы быть горизонтальным, а не вертикальным.

http://jsfiddle.net/8TfzJ/1/

Update

Чтобы vertiacaly выровнять два элемента добавить vertial-align сверху к ним, см: http://jsfiddle.net/8TfzJ/2/.

Примечание в скрипке Я добавил границу, чтобы вы могли видеть, что элементы выровнены по вертикали. Возможно, вам потребуется настроить поля и заполнить содержащиеся элементы, чтобы полностью достичь того, что вы ищете. Используйте Firebug для Firefox, чтобы помочь вам здесь. Вы можете просмотреть эксперимент с CSS в ролике.

В современном браузере вы должны увидеть: enter image description here

Смотрите эту статью для некоторого инфа о недостатках inline-block и как по прибывшим их: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

На стороне записки, вы не должны ставить блочные элементы, например h1 внутри встроенных элементов, например. a. Это должно быть наоборот. Попробуйте подтвердить его здесь: http://validator.w3.org/#validate_by_input+with_options

источник

2014-01-30 23:54:17

Джон, спасибо за сообщение. Я хочу, чтобы эти элементы были горизонтальными :) Но .... Я хотел бы показать контейнер user-nav-container и логотип-контейнер горизонтально, ака бок о бок. –

См. Скрипку, которую я добавил к вашему вопросу ... контейнер контейнера и логотип ** ** бок о бок –

Jon, спасибо за быстрый ответ. Я проверил скрипку, но результат все еще не то, что я ищу. Я хотел бы, чтобы div с сайтом 1 и сайтом 2 отображался справа от div-контейнера «logo container».Результат будет таким, как если бы логотип находился в верхнем левом углу, а также против списка, который будет отображаться справа от логотипа. Вместо этого я вижу, что «Site 1, Site 2 div» появляется ниже ссылки в контейнере-логотипе. –

Я знаю, что это не так инлайн-блоки, но вы что-то вроде этого JSFiddle?

#navbar:after 
{ 
    display: table; 
    content: ""; 
    clear: both; 
} 
#logo-container, 
#user-nav-container 
{ 
    float: left; 
}

источник

2014-01-30 23:37:20

Выравнивание divs по горизонтали с помощью CSS-дисплея:

ответ

Смежные вопросы