Дисплей divs горизонтально с css

Я новичок в веб-дизайне, и я стараюсь несколькими способами поместить мою кнопку <div> s в один <div> по горизонтали. Я пробовал использовать display:inline-block и float:left, но не работал. Пожалуйста, кто-нибудь скажет мне, что является ошибкой there:Дисплей divs горизонтально с css

источник

2013-03-04 Hued Bafuli

http://jsfiddle.net/wZf4C/1/ –

Пожалуйста, ваши код проблемы, а также jsFiddle ссылки: HTTP://meta.stackexchange.com/questions/84342/answer-that-only-contains-a-link-to-jsfiddle – Lowkase

что мне нужно, чтобы положить первые 3 кнопки (repin, like, comment) horizobtally и second 3 buttons the same способ быть горизонтальным –

Yowza! Первое правило отладки: упростите условия. У вас есть тонны CSS, упакованные в эту скрипку, из-за чего сложно скомпрометировать вашу проблему.

У вас есть две вещи, препятствующие появлению ваших кнопок на одной линии по горизонтали.

.pin .actions { 
    width: 125px; 
}

Это сделало контейнер слишком узким, чтобы поместить более одной кнопки на линию. Попробуйте изменить это на 300 пикселей. (Или, вы знаете, ничего больше.)

.actions .WhiteButton.Button11 { 
    clear: both; 
}

Этот стиль не означает, что не плавали предметы разрешается либо справа или слева от кнопки.

Измените оба из них, и вы должны иметь то, что хотите.

http://jsfiddle.net/nate/wZf4C/2/

источник

2013-03-04 14:30:34 Nate

Спасибо, его работа. Большое спасибо –

Я рад, что он работает! Вы должны пойти и принять ответ. Я рекомендую принять Eamon Nerbonne's, так как наши ответы одинаковы, и Eamon был первым. – Nate

У вас есть заявление clear:both, которое фактически аннулирует ваш float:left;. Кроме того, ваш содержащий div имеет крошечный размер 125 пикселей, что, вероятно, слишком мало для ваших поплавков. Вы можете позволить автозагрузке контейнера и ограничить размер позже, как только вы дойдете до этапа графического дизайна.

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

источник

2013-03-04 14:29:36

Спасибо, его работа. Большое спасибо –

<style> 
.grid{ 
    width:200px; 
    height:200px; 
    background-color:#666666; 
    float:left; 
    margin:5px; 
} 
</style> 

<div class="grid">Div 1</div> 
<div class="grid">Div 2</div> 
<div class="grid">Div 3</div>

источник

2013-03-04 14:32:31

Я думаю, простой CSS код линия решает вашу проблему.

maring-left:auto; 
margin-right:auto;

Я использую этот трюк, когда я хочу, чтобы выровнять div или span горизонтально

источник

2013-03-04 15:06:59 jameson

Дисплей divs горизонтально с css

ответ

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