float

[RoleXXX]

Задача: Выставить в ряд 3 float:left, но запретить им перенос друг под друга при нехватке длины родителя.

Есть варианты? А может float тут вообще не при чем? Может поставить в линию без переноса 3 резиновых блока можно как-то по-другому?

[s0rr0w]

Задача: Выставить в ряд 3 float:left, но запретить им перенос друг под друга при нехватке длины родителя.

Есть варианты? А может float тут вообще не при чем? Может поставить в линию без переноса 3 резиновых блока можно как-то по-другому?

display: inline-block;

[RoleXXX]

Это для какого броузера? в ИЕ7 блоки встали друг под другом даже когда места достаточно.

[Victor Ananiev]

min-with; - for All

display:-moz-inline-stack; - Mozilla Firefox

display:inline; zoom:1; overflow:hidden; - для ИЕ(вроде бы)

[s0rr0w]

FF2 Можно смело игнорировать, поэтому можно просто использовать inline-block.

Это для какого броузера? в ИЕ7 блоки встали друг под другом даже когда места достаточно.

А код слабо выложить этих трех блоков? А то читаю я ваши рассказы, и диву даюсь, про что вы там речь ведете...

[RoleXXX]

Вот код одного блока. Их там может быть порядка десяти.

<div style="height:33px; position:relative; float:left; margin:0 5px 5px 0; background-color:#acb7be;">

	 <div style="float:left; margin:5px 2px 5px 5px;">
		  <input style="width:100px; margin:0; padding:0;" name="" type="text" />
	 </div>

	 <div style="float:left; margin:5px 2px 5px 0;">
		  <input style="width:29px; height:23px; margin:0; padding:0;" name="" type="button" value="§" />
	 </div>

	 <div style="float:left; margin:5px 2px 5px 0;">
		  <input style="width:29px; height:23px; margin:0; padding:0;" name="" type="button" value="§" />
	 </div>

	 <div style="clear:both;"></div>
</div>

2Victor.

Не канает. все равно кнопочки сваливаются друг под друга если места им мало.

[Victor Ananiev]

а если white-space:nowrap; )

[RoleXXX]

2Victor,

а если проверить прежде, чем советовать? :-) тоже не работает.

[Searcher]

вроде ничего сложного нет:

<div style="height:33px; width:100%; white-space:nowrap; overflow:hidden;">

	 <div style="display:inline; margin:5px 2px 5px 5px;">
		  <input style="width:100px; margin:0; padding:0;" name="" type="text" />
	 </div>

	 <div style="display:inline; margin:5px 2px 5px 0;">
		  <input style="width:29px; height:23px; margin:0; padding:0;" name="" type="button" value="§" />
	 </div>

	 <div style="display:inline; margin:5px 2px 5px 0;">
		  <input style="width:29px; height:23px; margin:0; padding:0;" name="" type="button" value="§" />
	 </div>

	 <div style="clear:both;"></div>
</div>

[RoleXXX]

2Searcher,

inline и nowrap помогли. Спасибо :-)

Видима раньше не в туда вставлял...

Только margin перестали работать. Но это надеюсь поправимо.

[Justnewone]

2Searcher,

inline и nowrap помогли. Спасибо :-)

Видима раньше не в туда вставлял...

Только margin перестали работать. Но это надеюсь поправимо.

Нет, не поправимо. Только IE6 может применить вертикалные паддинги/маргины к инлайн элементу, если элементу дать zoom:1.

Edited April 10, 2009 by Justnewone

[Searcher]

Паддинги для inline работают, но не раздвигают границ родительского элемента. Для родителя тогда надо ставить свои паддинги для компенсации.

причем, это касается только вертикальных паддингов, горизонтальные паддинги работают как надо.