Как выровнять пролетом и DIV на той же линии

У меня есть следующий HTML:Как выровнять пролетом и DIV на той же линии

<div class="mega_parent"> 
<div class="parent"> 
<div class="holder"> 
    <span class="holder_under">Left heading</span> 
    <div class="holder_options"> 
     <span class="holder_options_1">Option 1</span> 
     <span class="holder_options_2">Option 2</span> 
     <span class="holder_options_3">Option 3</span> 
    </div> 
</div> 
</div> 
</div>

и следующий CSS:

.holder { 
    background-color: blue; 
    padding: 10px; 
} 
.holder_under { 
    padding-left: 10px; 
    font-size: 16px; 
    color: #999; 
} 
.parent { 
    float: left; 
    margin-right: 20px; 
    width: 600px; 
} 
.mega_parent { 
background-color: blue; 
    margin: 130px auto; 
    min-height: 320px; 
    height: 100% auto; 
    overflow: auto; 
    width: 940px; 
    padding: 0px 10px; 
}

Вопрос:

Как Я делаю div с классом holder_options выровненным в той же строке, что и диапазон с классом .holder_under?

Вот как он выглядит в настоящее время в jsFiddle.

источник

2013-05-20 starbucks

'float: left' должно помочь – Morpheus

Вы можете начать с окончания ваших divs должным образом. – Michael

Ваш пробел 'Option 2' не закрыт. ** Редактировать: ** Или было, пока @LenialMacaferi не отредактировал его для вас. Проверьте свой код, чтобы убедиться, что диапазон закрыт. –

Div являются по умолчанию блок элементов уровня. Пожалуйста, почитайте больше о block level elements here.

«элементы на уровне блоков - Их наиболее важной характеристикой является то, что они, как правило, являются отформатированный с разрывом строки до и после элемента (тем самым создание автономного блока контента). "

Установить его display:inline-block;

.holder_options { 
    display:inline-block; 
}

Working jsFiddle here.

источник

2013-05-20 15:21:48 lifetimes

Спасибо Зениту. Прошу прощения, я забыл один div, который был в этом коде. Можете ли вы просмотреть его еще раз, если это не так много? Благодаря! – starbucks

@starbucks Он по-прежнему работает просто отлично :) - http://jsfiddle.net/QELyG/2/ – lifetimes

Еще раз спасибо, но он, кажется, не двигается вверх и не выравнивается по моему коду. Не уверен, что там происходит! – starbucks

по умолчанию div являются display:block, который установлен на 100% ширины. установите его в display:inline или display:inline-block брать только то, что ему нужно, и позволить другим, чтобы поместиться на одной и той же линии

источник

2013-05-20 15:19:01

.holder_options 
{ 
    float:right; 
}

Вот JS Bin: http://jsbin.com/idilim/1/

источник

2013-05-20 15:22:51

и нужно встроенный блок

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

CSS

.holder { 
     background-color: blue; 
     padding: 10px; 
    } 
    .holder_under { 
     padding-left: 10px; 
     font-size: 16px; 
     color: #999; 
    } 
    .holder_options { 
     display:inline-block; 
    }

HTML

<div class="holder"> 
     <span class="holder_under">Left heading</span> 
      <div class="holder_options"> 
       <span class="holder_options_1">Option 1</span> </div>

источник

2013-05-20 15:23:42 underscore

Да структура, которую вы выложили, еще не выполнена хорошо, просто плавайте .holder_options влево:

.holder_options { 
    float: left; 
}

источник

2013-05-20 15:23:51

Как сказал Морфеус в комментарии, style="display: inline;" должен это сделать.

<div class="holder"> 
    <span class="holder_under">Left heading</span> 
    <div class="holder_options" style="display: inline;"> 
     <span class="holder_options_1">Option 1</span> 
    </div> 
</div>

источник

2013-05-20 15:25:46 iboros

Как выровнять пролетом и DIV на той же линии

ответ

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