Как я могу сделать div не больше, чем его содержимое?

avatar
George Snider
16 января 2009 в 16:03
1635881
42
2283

У меня макет, похожий на: 

<div>
    <table>
    </table>
</div>

Я бы хотел, чтобы div расширялся только до такой ширины, какой становится мой table.

Источник
annakata
16 января 2009 в 16:32
97

эффект называется «термоусадочная упаковка», и, как уже было сказано, есть несколько способов сделать это (float, inline, min / max-width), у каждого из которых есть побочные эффекты на выбор.

AlphaX
22 августа 2020 в 13:11
0

Ни один из приведенных ниже ответов не помог мне, кроме: display: table -OR- height: fit-content !!!

Ответы (42)

avatar
Coder_Naveed
18 октября 2021 в 14:35
14

просто установите ширину и высоту в соответствии с содержимым. это очень просто.

div {

    width: fit-content;
    height: fit-content;
    padding: 10px;

}

Я добавляю padding: 10px;. если его оставить, элемент div полностью прилипнет к таблице и будет выглядеть немного неуклюже. Заполнение создаст заданное пространство между границей элемента и его содержимым. Но это ваше желание не обязательно.

Mark Stewart
18 октября 2021 в 19:04
0

За исключением части adding: 10px;, это тот же ответ, который был опубликован 27 мая 2013, в 00:41.

avatar
Trupti M Panchal
6 апреля 2021 в 02:54
6
    .outer{
          width:fit-content;   
          display: flex;
          align-items: center;
    }
    .outer .content{
         width: 100%;
    }
        
        
        
        
<div class=outer>
    <div class=content>
       Add your content here


    </div>
        
</div>
avatar
Awabil George
24 ноября 2020 в 23:12
8

div{
width:fit-content;
}
<div>
    <table>
    </table>
</div>
egdavid
22 марта 2021 в 14:43
0

Для работы в Firefox должно быть width: -moz-fit-content;.

avatar
Codemaker
31 августа 2020 в 09:30
19

Попробуйте использовать свойство width: max-content, чтобы настроить ширину блока div по размеру его содержимого.

Попробуйте этот пример, 

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  width: max-content;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>

</body>
</html>
avatar
Rehan Rabbani
14 сентября 2019 в 16:02
-4

Вы можете использовать height: 100% и ширину по вашему выбору. Это делает div не больше, чем его содержимое.

nalm
5 ноября 2019 в 12:52
4

если вы установите высоту 100%, это будет 100% от общего размера окна

avatar
Showrin Barua
11 июля 2019 в 03:19
21

Вы можете попробовать этот код. Следуйте коду в разделе CSS. 

div {
  display: inline-block;
  padding: 2vw;
  background-color: green;
}

table {
  width: 70vw;
  background-color: white;
}
<div>
    <table border="colapsed">
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>

    </table>
</div>
avatar
Vinay Mehta
4 июня 2019 в 07:35
3

У меня есть span внутри div и просто установка margin: auto в контейнер div сработала для меня.

Andrei Gătej
18 сентября 2021 в 16:41
0

Любая подсказка, почему это работает?

avatar
Harshana
26 марта 2019 в 14:48
1

Что, если мы определим глобальную переменную и используем ее для обоих.

:root {
    --table-width: 400px;
}

.container{
     width:var(--table-width);
     border: 1px solid black;   // easy visualization
}
.inner-table {
     width:var(--table-width);
     border: 1px solid red;   // easy visualization
}
<div class="container">
    <table class="inner-table">
       <tr>
           <td>abc</td>
       </tr>
    </table>
</div>
avatar
ZhenyaUsenko
29 июля 2018 в 22:18
4

Вы можете использовать display: flex для родительского элемента

#parentElement {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
avatar
youngrrrr
8 июня 2018 в 00:04
27

Об этом упоминалось в комментариях, и его трудно найти в одном из ответов, поэтому:

Если вы используете display: flex по какой-либо причине, вы можете вместо этого использовать: 

div {
    display: inline-flex;
}

Это также широко поддерживается в браузерах.

Caleb Jay
22 февраля 2021 в 03:23
0

Обратите внимание, что это не сработает, если ваш элемент div находится в контейнере, который является одновременно display: flex и flex-flow: column. Это связано с тем, что значение по умолчанию для align-items - stretch. В этой ситуации вы должны установить для align-items значение, отличное от stretch, чтобы это решение работало.

avatar
Hamza
21 апреля 2018 в 16:11
22

Просто добавьте стиль в свой файл CSS 

div { 
    width: fit-content; 
}
David Rector
18 мая 2018 в 21:13
1

Я не думаю, что это кроссбраузерный вариант.

molsson
24 мая 2018 в 20:40
2

В настоящее время не работает в Edge: caniuse.com/#search=fit-content

Benj
1 июня 2019 в 08:16
0

Вы можете использовать -moz-fit-content для FF, по-видимому, префиксы других поставщиков разрешат свои собственные ...

mfluehr
20 сентября 2019 в 15:11
1

Это то же самое, что и ответ Виталия Федоренко.

avatar
James
21 июня 2017 в 20:48
11

Попробуйте display: inline-block;. Чтобы он был совместим с несколькими браузерами, используйте приведенный ниже код CSS. 

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}
<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>
avatar
Alireza
17 июня 2017 в 05:57
30

Хорошо, во многих случаях вам даже не нужно ничего делать, поскольку по умолчанию div имеет height и width как авто, но если это не ваш случай, применяется отображение inline-block будет работать на вас ... посмотрите на код, который я создаю для вас, и он сделает то, что вы ищете: 

div {
  display: inline-block;
}
<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>
avatar
Jaimin Dave
22 февраля 2017 в 11:04
11
<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

Это сделает ширину родительского блока такой же, как и ширина самого большого элемента.

Gobliins
22 февраля 2018 в 10:15
0

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

avatar
AJchandu
6 декабря 2016 в 19:36
6
div{
  width:auto;
  height:auto;
}
quotesBro
13 февраля 2018 в 10:15
0

Это не сработает, если div содержит встроенные (или встроенные-блочные) элементы, и у них другой размер шрифта и высота строки, чем у самого div.

avatar
NathanielSantley
21 октября 2016 в 17:22
3

Я бы просто установил padding: -whateverYouWantpx;

Heretic Monkey
21 октября 2016 в 22:00
3

Добро пожаловать в Stack Overflow! Пожалуйста, добавьте некоторое объяснение того, почему этот код помогает ОП. Это поможет дать ответ, из которого будущие зрители смогут извлечь уроки. См. Как ответить для получения дополнительной информации.

NathanielSantley
22 октября 2016 в 16:32
0

Это уменьшит размер коробки, чтобы он мог сделать коробку «не больше, чем ее содержимое».

David Rector
16 ноября 2016 в 23:06
0

Разве отрицательное заполнение не является недопустимым CSS?

NathanielSantley
18 ноября 2016 в 21:44
0

Отнюдь не. На самом деле я использовал его много раз, и это совершенно законно.

avatar
RPichioli
14 октября 2016 в 16:00
20

Вы можете использовать inline-block как @ user473598, но остерегайтесь старых браузеров. 

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla вообще не поддерживает встроенный блок, но у них есть -moz-inline-stack, что примерно такое же

Некоторый кроссбраузерность вокруг атрибута отображения inline-block: https://css-tricks.com/snippets/css/cross-browser-inline-block/

Вы можете увидеть некоторые тесты с этим атрибутом в: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it- отстой /

Chazy Chaz
11 августа 2017 в 19:23
1

О чем ты говоришь? Mozilla Firefox поддерживает inline-block с версии 3.0 (2008). Источник: developer.mozilla.org/en-US/docs/Web/CSS/…

avatar
Novice
30 сентября 2016 в 05:00
7

Мы можем использовать любой из двух способов в элементе div : 

display: table;

или, 

display: inline-block;

Я предпочитаю использовать display: table;, потому что он обрабатывает все лишние пробелы самостоятельно. В то время как display: inline-block требует исправления дополнительного места.

avatar
user6558785
14 июля 2016 в 19:33
12

Мое решение flexbox для CSS3 в двух вариантах: верхний ведет себя как span, а нижний как div, принимая всю ширину с помощью оболочки. Их классы: "верх", "низ" и "обёртка снизу" соответственно. 

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}
Is this
<div class="top">
	<table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
    	<table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.
Horacio
24 ноября 2017 в 03:06
0

Престижность для display: inline-flex;. Кстати, это работает без префикса для Chrome 62, firefox 57 и safari 11

avatar
Zeke
23 июня 2016 в 19:20
1

Просто

<div style="display: inline;">
    <table>
    </table>
</div>
avatar
Shuvo Habib
10 мая 2016 в 20:16
101

Есть два решения лучше

  1. display: inline-block;

    ИЛИ

  2. display: table;

Из этих двух display:table; лучше, , потому что display: inline-block; добавляет дополнительный запас.

Для display:inline-block; вы можете использовать метод отрицательного поля, чтобы исправить лишнее пространство

Nathaniel Ford
11 июля 2016 в 23:29
2

Не могли бы вы объяснить, почему display:table лучше?

Shuvo Habib
12 июля 2016 в 06:09
1

Для display: inline-block вы должны использовать метод отрицательного поля, чтобы исправить дополнительный интервал.

Ilya Streltsyn
8 декабря 2017 в 07:46
11

@NathanielFord, display:table оставляет элемент в контексте форматирования блока, поэтому вы можете управлять его положением с полями и т. Д. Как обычно. display:-inline-*, с другой стороны, помещает элемент во встроенный контекст форматирования, в результате чего браузер создает вокруг него анонимную оболочку блока, содержащую строчный блок с унаследованными настройками шрифта / высоты строки, и вставляет блок в эту строку. box (по умолчанию выравнивание по вертикали по базовой линии). Это связано с большим количеством «магии» и, следовательно, с потенциальными сюрпризами.

avatar
Abrar Jahin
23 марта 2016 в 09:45
15

Рабочая демонстрация здесь- 

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}
<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>
avatar
cregox
4 ноября 2015 в 03:24
5

Если у вас есть контейнеры, разрывающие строки, после долгих поисков хорошего CSS-решения и не находящегося, теперь я использую вместо этого jQuery:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});
nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>
Mark Amery
28 сентября 2016 в 17:29
0

Это явно нарушено во фрагменте для меня в Chrome; нажатие кнопки исправления во второй раз приводит к другим результатам, чем при первом нажатии.

cregox
28 сентября 2016 в 19:17
0

@MarkAmery на моем Mac. Я только что попробовал его на Chrome, Safari и Firefox, и все в порядке: никаких видимых ошибок, ничего на консоли, стабильное поведение. может что-то с окнами...

avatar
Nicolas Talichet
24 мая 2015 в 15:32
1

Лично я просто делаю это:

HTML-код: 

<div>
    <table>
    </table>
</div>

CSS-код: 

div {
    display: inline;
}

Если вы примените float к своему элементу div, это тоже сработает, но, очевидно, вам нужно применить CSS-правила «очистить оба» к следующему элементу HTML.

avatar
miksiii
5 октября 2014 в 09:36
20

Вы можете сделать это просто, используя display: inline; (или white-space: nowrap;).

Надеюсь, вы найдете это полезным.

avatar
Bondsmith
29 сентября 2014 в 06:08
5

Исправлено (работает, если у вас несколько детей): Вы можете использовать jQuery (см. ссылку JSFiddle) 

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

Не забудьте включить jQuery...

См. JSfiddle здесь

Mark Amery
28 сентября 2016 в 17:32
0

Это не работает, если ваш div имеет несколько дочерних элементов; он просто устанавливает ширину div равной ширине первого дочернего элемента.

Bondsmith
30 сентября 2016 в 13:08
0

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

avatar
trojan
11 декабря 2013 в 13:07
43

Ответ на ваш вопрос лежит в будущем, мой друг ...

, а именно "внутренний", идет с последним обновлением CSS3 

width: intrinsic;

к сожалению IE отстает от него, поэтому он еще не поддерживает его

Подробнее об этом: Модуль определения внутренних и внешних размеров CSS, уровень 3 и Могу ли я использовать?

А пока вы должны довольствоваться <span> или <div>, установленным на 

display: inline-block;
maryisdead
20 мая 2015 в 09:36
15

intrinsic как значение нестандартное. На самом деле это width: max-content. См. страницу MDN на этом или уже связанном черновике.

avatar
Vitalii Fedorenko
27 мая 2013 в 00:41
141

Вы можете попробовать fit-content (CSS3): 

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}
DAVIDBALAS1
9 мая 2016 в 06:10
2

@BartlomiejSkwira Любая замена, работающая в IE или Eclipse? другое решение, как встроенный блок, не работает для меня .. \

Sava B.
6 марта 2018 в 17:33
19

В этом слишком много смысла, конечно, без поддержки.

krubo
5 сентября 2020 в 17:38
0

fit-content, похоже, мне не подходит, но его кузены max-content и min-content работают нормально.

plong0
20 октября 2020 в 23:09
0

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

S. Doe
6 ноября 2020 в 17:07
1

Для меня «ширина: -moz-fit-content; width: fit-content;» работал. В противном случае в Firefox не работало (в ноябре 2020 г.).

avatar
unloco
7 марта 2013 в 17:37
4

Я попробовал div.classname{display:table-cell;}, и это сработало!

avatar
Jessica Brown
25 августа 2012 в 18:54
7

Я решил аналогичную проблему (где я не хотел использовать display: inline-block, потому что элемент был центрирован), добавив тег span внутри тега div и переместив форматирование CSS из внешнего div в новый внутренний тег span. Просто предложите это как еще одну альтернативную идею, если display: inline block вам не подходит.

avatar
2hamed
6 июня 2012 в 09:54
11

Поправляясь с Firebug, я обнаружил значение свойства -moz-fit-content, которое в точности выполняет то, что хотел OP, и его можно использовать следующим образом: 

width: -moz-fit-content;

Хотя он работает только в Firefox, я не нашел эквивалента для других браузеров, таких как Chrome.

Gavin
11 января 2017 в 22:30
0

По состоянию на январь 2017 года IE (все версии, включая Edge и мобильные устройства) и Opera Mini не поддерживают fit-content. Firefox поддерживает только ширину. Другие браузеры хорошо это поддерживают.

avatar
Salman von Abbas
12 мая 2012 в 23:39
243

display: inline-block добавляет дополнительный запас к вашему элементу.

Я бы порекомендовал это: 

#element {
    display: table; /* IE8+ and all other modern browsers */
}

Бонус: Теперь вы также можете легко центрировать этот модный новый #element, просто добавив margin: 0 auto.

uınbɐɥs
6 июля 2012 в 09:22
14

+1 - это лучшее и наиболее чистое решение для современных браузеров, которое также позволяет центрировать элемент. Условный комментарий с position: absolute необходим для <IE8.

feeela
6 июля 2012 в 15:05
22

При указании display: inline-block поля не добавляются. Но CSS обрабатывает пробелы, которые должны отображаться между встроенными элементами.

HelloWorldNoMore
26 апреля 2016 в 22:44
0

Пожалуйста, объясните, почему ваше решение display: table работает.

FlorianB
2 июля 2016 в 14:34
3

inline-block делает невозможным позиционирование элемента в его родительском элементе (например, если есть text-align: center, вы не можете заставить его придерживаться влево) display: table идеально :)

m4heshd
22 мая 2018 в 02:40
1

Это лучший вариант, если у вас есть position: absolute

avatar
DearWebby
29 апреля 2012 в 21:01
-4

Кажется, это работает во всех браузерах. Примером является реальная реклама, которую я использую в Интернете и в информационном бюллетене. Просто измените содержимое div. Он будет скорректирован и сжат в соответствии с указанным вами отступом.

<div style="float:left; border: 3px ridge red; background: aqua; padding:12px">
    <font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!
    </font>
</div>
zanlok
2 апреля 2013 в 04:13
2

шрифт полностью устарел. вероятно, отображается как <span> на любом текущем движке.

Pabbles
24 апреля 2014 в 15:43
2

@zanlok Он говорит о информационном бюллетене, <font> все еще кажется честной игрой в мире электронной почты, несмотря на его устаревание (2-й ответ): coderhelper.com/questions/8012799/…

avatar
Sony Santos
11 января 2012 в 12:01
90

Мне подходит: 

display: table;

в div. (Проверено на Firefox и Google Chrome ).

Zsolt Szatmari
3 июля 2014 в 13:12
6

Да, особенно если вам нужно центрировать с маржей: авто. В этом случае встроенный блок не является решением.

Ruslan Stelmachenko
20 мая 2016 в 17:38
1

Также обратите внимание, что если вы хотите, чтобы внутри этого элемента работали отступы, вы должны установить стиль border-collapse: separate;. Это значение по умолчанию во многих браузерах, но часто в CSS-фреймворках, таких как bootstrap, оно сбрасывается на collapse.

Silas S. Brown
10 июля 2017 в 16:56
0

Протестировано на MSIE 6 на телефоне под управлением Windows Mobile 6.5, выпущенном в 2009 году: он плавно превращается в полноразмерный div (что вряд ли будет проблемой для телефона). Если кто-то использует на настольном компьютере версию Internet Explorer ниже 8, значит, он использует неподдерживаемую операционную систему (IE6 поставляется с XP, IE7 поставляется с Vista); Я бы перенаправил их на страницу, предлагающую им перейти на GNU / Linux, если они хотят продолжать безопасное использование Интернета на этой машине.

Fabricio Leite
14 мая 2021 в 17:50
0

У меня тоже работает, спасибо!

avatar
Daft Wullie
26 августа 2011 в 08:14
38
width:1px;
white-space: nowrap;

у меня отлично работает :)

Rui Marques
3 января 2013 в 16:57
0

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

CoffeJunky
6 июня 2013 в 21:14
0

для слайдера ui jquery это здорово, потому что вам не нужно устанавливать ширину элемента содержимого

Antti Tanskanen
22 декабря 2020 в 12:14
0

width: auto; white-space: nowrap; сделал для меня вещь.

avatar
Edward
3 августа 2011 в 16:59
20
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <div id="content_lalala">
                this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
            </div>
        </td>
    </tr>
</table>

Я знаю, что людям иногда не нравятся таблицы, но должен вам сказать, я пробовал встроенные хаки css, и они вроде работали в некоторых div, а в других - нет, так что было действительно проще заключить расширение div в таблице ... и ... он может иметь или не иметь встроенное свойство, и все же таблица - это та, которая будет содержать общую ширину содержимого. =)

Craigo
27 марта 2012 в 06:26
2

Это не «правильный» способ, но IE6 / 7/8 часто просто не работает хорошо, когда все становится немного сложнее, поэтому я полностью понимаю, почему вы бы сделали это таким образом. Вы получили мой голос за.

NickSoft
1 сентября 2015 в 08:51
0

Я бы сделал это, но я должен окружить каждое поле ввода, так что это много лишнего html.

avatar
user473598
12 октября 2010 в 16:47
2618

Решение - установить для div значение display: inline-block.

miahelf
17 ноября 2011 в 08:23
243

@ leif81 Вы можете использовать span, или div, или ul или что-то еще, важная часть - для контейнера, минимальная ширина которого должна быть минимальной, имеет свойство CSS display: inline-block

bernstein
15 февраля 2012 в 23:09
12

если кто-то задается вопросом: затем можно центрировать родительский элемент таблицы, установив "text-align: center" для его родительского элемента и "text-align: left" для него (например, <body style = "text-align: center"> < span style = "text-align: left; display: inline-block;"> <table> ... </table> </span> </body>)

albanx
7 июля 2012 в 20:07
12

У меня он не работает на chrome с span, но работает с white-space: nowrap;

Savas Vedova
9 апреля 2014 в 12:09
62

Обратите внимание, что после установки свойства display: inline-block margin: 0 auto; не будет работать должным образом. В этом случае, если родительский контейнер имеет text-align: center;, тогда элемент inline-block будет центрирован по горизонтали.

avatar
nikib3ro
25 августа 2010 в 19:36
85
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack - кроссбраузерная поддержка встроенного блочного стиля (2007-11-19).

Justin
17 июля 2012 в 18:48
3

Любой, у кого есть эта проблема, должен добавить все эти стили. Firefox добавил поля, когда не используется -moz-inline-stack

avatar
mbillard
16 января 2009 в 16:41
246

Я думаю, используя 

display: inline-block;

будет работать, однако я не уверен насчет совместимости браузера.

Другое решение - обернуть ваш div в другой div (если вы хотите сохранить поведение блока):

HTML: 

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS: 

.yourdiv
{
    display: inline;
}
Matt Brock
18 февраля 2011 в 14:26
23

Чтобы ответить на вопрос совместимости браузера: это не будет работать с IE7 / 8 на элементах DIV. Вы должны использовать элементы SPAN.

robocat
7 августа 2012 в 23:24
0

@feeela - я всегда ставлю * перед зумом, например. *display: inline; *zoom: 1;. Я не тестировал эту конкретную ситуацию, но в прошлом я всегда обнаруживал, что взлом hasLayout требуется только для IE7 или IE8 в режиме IE7 (или IE8 в причудливых вариантах!).

feeela
8 августа 2012 в 08:07
0

@robocat Да, включение inline-block в IE 7 - это действительно обходной путь.

robocat
22 августа 2012 в 18:12
0

@feela - ваш комментарий не имеет смысла для меня! Я предлагал поставить * перед зумом, т. е. * масштабирование: 1;

HelloWorldNoMore
26 апреля 2016 в 22:43
4

Пожалуйста, объясните, почему работает ваше решение inline-block.

avatar
buti-oxa
16 января 2009 в 16:40
352

Вам нужен блочный элемент, который имеет то, что CSS называет шириной сжатия по размеру, а спецификация не предоставляет благословенного способа получить такое. В CSS2 сжатие по размеру не является целью, а является средством решения ситуации, когда браузеру «приходится» получать ширину из воздуха. Вот эти ситуации:

  • с плавающей запятой
  • элемент с абсолютным позиционированием
  • встроенный блочный элемент
  • элемент таблицы

, если ширина не указана. Я слышал, что они думают добавить то, что вы хотите, в CSS3. А пока обойдемся одним из вышеперечисленных.

Решение не раскрывать эту функцию напрямую может показаться странным, но на то есть веская причина. Это дорого. Сжатие по размеру означает форматирование как минимум дважды: вы не можете начать форматирование элемента, пока не узнаете его ширину, и вы не можете рассчитать ширину без прохождения всего содержимого. Кроме того, не так часто требуется усадочный элемент, как можно было бы подумать. Зачем вам нужен дополнительный div вокруг вашего стола? Может быть, заголовок таблицы - это все, что вам нужно.

miahelf
17 ноября 2011 в 08:24
37

Я бы сказал, что inline-block как раз предназначен для этого и отлично решает проблему.

avatar
Soviut
16 января 2009 в 16:13
37

Используйте решение, совместимое с CSS2: 

.my-div
{
    min-width: 100px;
}

Вы также можете разместить свой div с плавающей точкой, что сделает его как можно меньше, но вам нужно будет использовать clearfix, если что-то внутри вашего div плавающее: 

.my-div
{
    float: left;
}
Soviut
18 октября 2009 в 23:35
3

Должно. Какой тип документа вы используете?

avatar
falstro
16 января 2009 в 16:08
48

Не знаю, в каком контексте это появится, но я считаю, что свойство стиля CSS float либо left, либо right будет иметь такой эффект. С другой стороны, у него будут и другие побочные эффекты, например, возможность плавания текста вокруг него.

Пожалуйста, поправьте меня, если я ошибаюсь, я не уверен на 100% и в настоящее время не могу проверить это сам.

bobince
16 января 2009 в 16:14
1

Да, в CSS 2.1. (CSS2.0 сделает плавающее на всю ширину, но на самом деле это делает только IE5 / Mac). Таблицы и плавающие объекты - единственные типы отображения, которые могут сжиматься, чтобы соответствовать их содержимому.