Блог

Главная - Вопросы по программированию - дисплей: встроенный блок, как расположить div на том же уровне

дисплей: встроенный блок, как расположить div на том же уровне

#html #css

#HTML #css

Вопрос:

Внутри другого div есть два подразделения, которые также обернуты div

 <div id="main">
    <div id="wrap">
        <div id="content">
            Hello how are you<br/>   
            Hello how are you<br/>
            Hello how are you<br/>    
        </div>
        <div id="nav">
            <div id="menu">
                <ul>
                    <li><a href="#page1">PAge1</a></li>
                    <li><a href="#page1">PAge1</a></li>
                    <li><a href="#page1">PAge1</a></li>
                    <li><a href="#page1">PAge1</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Итак, один из разделов содержит несколько абзацев, которые упомянуты выше как привет, как дела, а другой — горизонтальное меню

Итак, вот мой код CSS

 #wrap
{
    width: 100%; 
    margin: 0 auto; 
    text-align: center;
}

#content
{
    background-color: yellow;
    width: 30%;
}

#main
{
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-color: red;
    padding: 10px; 
}

#main div div
{
    display: inline-block;
}

#nav
{
    margin-left: 30px;
}

ul
{
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

#menu li
{
    display: inline-block;
    padding: 5px;
    border: 1px solid yellow;
}

#menu li a
{
    text-decoration: none;   
    color: yellow;
}

Теперь проблема в том, почему горизонтальное меню не находится в той же строке, начинается абзац,

Вот скрипка: http://jsfiddle.net/mohamedmusthafac/DW52N/15 /

я хочу, чтобы оба div запускались в одной строке без использования float:left

Ответ №1:

В зависимости от того, что вы имеете в виду, записывая «ту же строку», я бы предложил использовать vertical-align: top or vertical-align: bottom для элементов встроенного блока.

В вашем случае я бы добавил это свойство к #content #nav элементу and следующим образом:

 #content {
    ....
    vertical-align: top;
}

#nav{
    ....
    vertical-align: top;
}

Вот обновление jsfiddle:

http://jsfiddle.net/DW52N/17/

Комментарии:

1. Извините за поздний ответ, спасибо за код, это то, чего я ожидал

2. @musthafa Удивительно: это первый вопрос, который я вижу, на который есть все ответы без какого-либо голосования, и в то же время сам вопрос не получил ни одного. Один вопрос и четыре ответа с нулевым количеством голосов! По крайней мере, вы можете принять этот ответ, поскольку кажется, что он вам помог.

Ответ №2:

CSS :

 #wrap
{
    width: 100%; 
    margin: 0 auto; 
    text-align:center;

}
#content
{
    background-color:yellow;
    width:30%;
   vertical-align: top;
}

#main
{
    width:100%;
    padding:0px;
    margin:0px;
    background-color:red;
    padding:10px; 
}
#main div div
{
    display:inline-block;

}

#nav
{
    margin-left:30px;
    vertical-align: top;
}

ul
{
    padding:0px;
    margin:0px;
    list-style-type:none;
}
#menu li
{
    display:inline-block;
    padding:5px;
    border:1px solid yellow;
}
#menu li a
{
 text-decoration:none;   
    color:yellow;
}

HTML :

 <div id="main">
    <div id="wrap">
    <div id="content">
        Hello how are you<br/>   
        Hello how are you<br/>    Hello how are you<br/>    
    </div>
        <div id="nav">
    <div id="menu">
        <ul>
            <li><a href="#page1">PAge1</a></li>
            <li><a href="#page1">PAge1</a></li>
            <li><a href="#page1">PAge1</a></li>
            <li><a href="#page1">PAge1</a></li>
        </ul>
            </div>
    </div>
    </div>
</div>

Проверьте это, это сработает.

Добавьте эти свойства к своим идентификаторам

 #content {
    ....
    vertical-align: top;
}

#nav{
    ....
    vertical-align: top;
}

Ответ №3:

Попробуйте этот код, чтобы выровнять содержимое по вертикали по центру.

#content, #nav {
vertical-align: middle;
}

Ответ №4:

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

 #content, #nav {
  margin: 0px auto;
}

или

 #content, #nav {
  vertical-align: middle;
}
Метки: