Ширина блочного элемента

[vla]

Минимальная ширина блочного элемента​

Каким способом сделать блочный элемент минимальной ширины? Мне это нужно для рамок (border). По умолчанию элемент занимает все пространство по ширине...

Конструкция такая:

<ul style="border:1px solid #ccc;">
<li>
  Контент
</li>
<ul>

<div style="border:1px solid #ccc;">
Контент
</div>

В каритнках:

Спойлер

Так надо:
[sharedmedia=core:attachments:1827]
Так получается:
[sharedmedia=core:attachments:1828]

1. div,ul{float:left;}

рамка будет как хотел, но тогда эти блоки будет обтекать другой контент, что не удивительно​

2. div,ul{width:10em;}

так тоже можно подогнать, но я не хочу задавать ширину явно​

3. div,ul{display:inline/table/table-cell/...}

display - преобразовать в строку и поставить <br>, но мне это кажется по колхозному. А, display-table - это CSS2 - не критично, но все-же...​

Мне кажется есть простейшее решение, или устоявшийся способ... Как бы сделали вы? Что посоветуете?

 

[BaNru]

а пробовал min/max-width?

рамка будет как хотел, но тогда эти блоки будет обтекать другой контент, что не удивительно

Чтобы не обтекало clear:both у след. элемента

 

[vla]

а пробовал min/max-width?

для этого надо указывать значение минимальной/максимальной ширины... А я не знаю значение...

Чтобы не обтекало clear:both у след. элемента

Это не практиковал, спасибо, учту. Возможно, так и сделаю!

 

[tigra60]

Каким способом сделать блочный элемент минимальной ширины?

display:inline-block;

 

[motek]

Каким способом сделать блочный элемент минимальной ширины?

display:inline-block;

не поддерживается 7ослом...

 

[vla]

не поддерживается 7ослом...

ну да, это я уже подметил в заглавном сообщении. и В моем примере не увидел разницы между display:inline; и display:inline-block;. Все равно придется использовать clear:both, как показал [member=BaNru]. Тогда чем этот способ лучше float:left;?

 

[BaNru]

Тогда чем этот способ лучше float:left;?

Я нашел плюсы display:inline-block;, но описывать их долго. Лучше попробовать самому.
Например при inline-block работает text-align и vertical-align
Но иногда конечно овчинка выделки не стоит.
Для разнообразия попробуй, что бы знать как и что работает, а дальше уже сам поймешь что для тебя лучше.

 

[vla]

Попробую, конечно!
Я не понял чем отличаются display:inline-block; и display:block; для моего примера!

 

[BaNru]

Для твоего ХЗ.
Он предназначен для того, чтобы делать блоки в ряд.

 

[motek]

Попробую, конечно!
Я не понял чем отличаются display:inline-block; и display:block; для моего примера!

исключительно поддержкой осла (в твоем примере)...(можно на "ты"? :blush: )...
я бы использовал float:left; и overflow: hidden;

 

[BaNru]

overflow: hidden;

А это зачем?

 

[motek]

overflow: hidden;

А это зачем?

за шкафом :laugh: ...поэксперементируй

 

[BaNru]

За шкафом нет, смотрел.

Экспериментировал. Оно для другого необходимо. Но не для данной задачи.

 

[vla]

[member=BaNru], можешь посмотреть? Не работает, блин! Я наверное ошибку глупую совершил...

<ul class="go">
<li>Сервис <b>&raquo;</b></li>
<li>Параметры&hellip; <b>&raquo;</b></li>
<li>Система <b>&raquo;</b></li>
<li>Графический редактор <b>&raquo;</b></li>
<li>Системные линии <b>&raquo;</b></li>
</ul>
<span style="clear:both;">Позволяет задать цвет и толщину на экране, толщину на бумаге системных (стандартно поддерживаемых КОМПАС) стилей линий.</span>

ul.go{
float:left;
margin:.25em auto .25em .25em;
padding:.1em;
color:#1E1E1E;
border:1px solid #CCC;
font-family:Arial;
font-weight:normal;
font-size:.815em;
line-height:1em;
}
ul.go li{list-style-type:none;}
ul.go b{font-weight:normal;font-size:1.5em;color:#CCC;}

Сделал, как ты сказал. Я правильно понял тебя?

 

[BaNru]

Я наврал немного. В таких вариантах я ставлю
<br>
:biggrin:

<ul class="go">
<li>Сервис <b>»</b></li>
<li>Параметры… <b>»</b></li>
<li>Система <b>»</b></li>
<li>Графический редактор <b>»</b></li>
<li>Системные линии <b>»</b></li>
</ul><br class="clear">
<span style="clear:both;">Позволяет задать цвет и толщину на экране, толщину на бумаге системных (стандартно поддерживаемых КОМПАС) стилей линий.</span>

ul.go{
float:left;
margin:.25em auto .25em .25em;
padding:.1em;
color:#1E1E1E;
border:1px solid #CCC;
font-family:Arial;
font-weight:normal;
font-size:.815em;
line-height:1em;
}
ul.go li{list-style-type:none;}
ul.go b{font-weight:normal;font-size:1.5em;color:#CCC;}
.clear {clear: both;}

Для тебя кстати есть еще другой вариант
display: table;

Либо для span добавить display: block; он же у тебя inline по умолчанию

 

[motek]

Для тебя кстати есть еще другой вариант
display: table;

не поддерживается 7 ишаком

vla вот так низзя

margin:.25em auto .25em .25em;

 

[vla]

Я наврал немного. В таких вариантах я ставлю

Ааааа! Думал, что я безнадежен.

Как оказалось, не так просто это сделать на CSS! Я считаю, нечего выпендриваться - идем влоб: добавляем лишние HTML-теги:

<p>
  <блок style="float:left;">
	Контент блока
  </блок>
</p>
<p  style="clear:both;">
  Текст, текст, текст
</p>

 

[BaNru]

Либо для span добавить display: block; он же у тебя inline по умолчанию

 

[vla]

vla вот так низзя margin:.25em auto .25em .25em;

- здесь это ни причем, но учту, спасибо.

PS: Про display:_; я знаю!

 

[BaNru]

Ну и в чем тогда проблема?
http://jsfiddle.net/BaNru/bLQUb/