Как сделать так, чтобы элементы div отображались встроенными?

254

Учитывая этот HTML:

<div>foo</div><div>bar</div><div>baz</div>

Как сделать так, чтобы они отображались на экране так:

Foo Bar Baz

не так:

Foo
Bar
Baz

css line html

— Стив
источник

268

Это что-то еще тогда:

div.inline { float:left; }
.clearBoth { clear:both; }

<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->

Развернуть фрагмент

— Дэррил Хейн
источник

на самом деле это был единственный способ корректно отображать встроенные функции, и я не знаю, почему не работало

— безплавающее

23

Имена классов css здесь не должны использоваться в качестве примера. Используйте правильное смысловое именование как: css-tricks.com/semantic-class-names

— Берик

261

Встроенный div - это извращенная сеть, и его нужно побеждать, пока он не станет промежутком (как минимум 9 раз из 10) ...

<span>foo</span>
<span>bar</span>
<span>baz</span>

... отвечает на оригинальный вопрос ...

— bochgoch
источник

11

Есть моменты, когда вы хотите, чтобы div отображал inline, например, когда вы хотите добавить поле слева и справа от элемента. Я не думаю, что это может быть сделано с пролетом. Стив, вероятно, должен использовать float вместо inline.

— Дэррил Хейн

8

дополняет да, не маржа

— Андреас Вонг

8

К сожалению, HTML5 не поддерживает помещение div в <span>. Раньше я использовал <span> для размещения CSS-стилей в разделе, а браузер не интерпретировал этот раздел как блок и не навязывал мне его структуру блока. Но я только что обнаружил сегодня, когда портировал свою страницу на JQuery Mobile + HTML5, что если у вас есть <div> в <span>, валидатор HTML5 будет жаловаться, что это недопустимый HTML5, поэтому есть случаи, когда вместо тега используется <span> встроенный <div> невозможен, по крайней мере с HTML5.

— Kmeixner

4

Иногда, хотя вы живете в мире, который вы не создали, и единственное, что вы можете изменить в CSS. В этом случае style = "display: inline" работает хорошо.

— Мэтью Локк

3

Если вы не «застряли» с использованием divs, это хороший ответ. Но может быть много причин, по которым вам нужно использовать div, но они должны отображаться как встроенные элементы.

— Bobble

174

Попробуйте написать это так:

div { border: 1px solid #CCC; }

    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>

Развернуть фрагмент

— Рэнди Сугианто 'Юку'
источник

16

Это правильный ответ на вопрос, но, учитывая принятый ответ, я подозреваю, что вопрос не касается реального сценария.

— Стив Перкс

34

Прочитав этот вопрос и ответы пару раз, все, что я могу сделать, - это предположить, что редактирование происходило довольно часто, и я подозреваю, что вам дали неправильный ответ на основании недостаточного предоставления информации. Моя подсказка исходит от использования brтега.

Извинения Дэррилу. Я прочитал class = "inline" как style = "display: inline". У вас есть правильный ответ, даже если вы используете семантически сомнительные имена классов ;-)

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

Если вы хотите поместить в них больше, чем встроенные элементы, divsвы должны использовать плавающие элементы divвместо того, чтобы делать их встроенными.

Плавающие divs:

===== ======= ==   **** ***** ******   +++++ ++++
===== ==== =====   ******** ***** **   ++ +++++++
=== ======== ===   ******* **** ****   
===== ==== =====                       +++++++ ++
====== == ======

Встроенные div:

====== ==== ===== ===== == ==== *** ******* ***** ***** 
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++

Если вы после первого, то это ваше решение и потерять эти brтеги:

<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>

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

Спасибо Стив

— Стив Перкс
источник

24

Используйте display:inline-blockс полем и медиа-запросом для IE6 / 7:

<html>
  <head>
    <style>
      div { display:inline-block; }
      /* IE6-7 */
      @media,
          {
          div { display: inline; margin-right:10px; }
          }
   </style>
  </head>
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</html>

— Пол Суатте
источник

11

Вы должны использовать <span>вместо <div>для правильного способа inline . потому что div это элемент уровня блока, а ваше требование для элементов уровня inline-block.

Вот HTML-код в соответствии с вашими требованиями:

<div class="main-div">
 <div>foo</div>
 <div>bar</div>
 <div>baz</div>`
</div>

У вас есть два способа сделать это

используя простой display:inline-block;
или используя float:left;

так что вы должны display:inline-block;принудительно изменить свойство отображения

Пример первый

div {
    display: inline-block;
}

Пример два

div {
    float: left;
}

вам нужно очистить поплавок

.main-div:after {
    content: "";
    clear: both;
    display: table;
}

— Хидайт Рахман
источник

7

Как уже упоминалось, display: inline, вероятно, то, что вы хотите. Некоторые браузеры также поддерживают встроенные блоки.

http://www.quirksmode.org/css/display.html#inlineblock

— Kevin
источник

3

@NexusRex, есть обходной путь, чтобы заставить IE вести себя правильно, однако отображение: inline - правильный ответ. Я считаю, что обходной путь: display: inline-block; * дисплей: встроенный; * увеличение: 1; установка масштаба заставляет IE обрабатывать элемент как блочный элемент.

— Крис Стивенс

7

Просто используйте div-обертку с «float: left» и поместите внутри коробки, также содержащие float: left:

CSS:

wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}

.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}

HTML:

<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>

— А. Бендер
источник

6

<span> ?

— Pirat
источник

2

Я думаю, что мы говорим о встраивании блочных элементов, которые могут иметь ширину и высоту. Представьте себе div с фоновым изображением, которое вы хотите встроить в текст.

— NexusRex

6

неплохо для меня :

<style type="text/css">
    div{
        position: relative;
        display: inline-block;
        width:25px;
        height:25px;
    }
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>

— flairon
источник

4

Я бы использовал пролеты или плавающий div слева. Единственная проблема с плавающей точкой заключается в том, что вы должны впоследствии очистить float или для содержащего div должен быть установлен стиль переполнения auto

— Кэм Туллос
источник

Я считаю, что мы говорим о div, встроенном в текст или другой текст, а не в одну сторону.

— NexusRex

При использовании float: left, с overflow: auto на содержащем div, как / когда появится полоса прокрутки, чтобы переполнение могло войти в игру?

— cellepo

3

Я знаю, что люди говорят, что это ужасная идея, но на практике она может быть полезна, если вы хотите сделать что-то вроде мозаичных изображений с комментариями под ними. например, Picasaweb использует его для отображения миниатюр в альбоме.
Смотрите, например, / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (класс goog-inline-block; я сокращаю его до ib здесь)

/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }

Учитывая этот CSS, установите ваш div в класс ib, и теперь он волшебным образом является встроенным блочным элементом.

— Дэвид Эйсон
источник

3

Вы должны содержать три div. Вот пример:

CSS

div.contain
{
  margin:3%;
  border: none;
  height: auto;
  width: auto;
  float: left;
}

div.contain div
{
  display:inline;
  width:200px;
  height:300px;
  padding: 15px;
  margin: auto;
  border:1px solid red;
  background-color:#fffff7;
  -moz-border-radius:25px; /* Firefox */
  border-radius:25px;
}

Примечание: атрибуты border-radius являются необязательными и работают только в браузерах, совместимых с CSS3.

HTML

<div class="contain">
  <div>Foo</div>
</div>

<div class="contain">
  <div>Bar</div>
</div>

<div class="contain">
  <div>Baz</div>
</div>

Обратите внимание, что div'ы 'foo', 'bar' и 'baz' хранятся внутри div-а.

— word5150
источник

2

<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>

— Дэррил Хейн
источник

2

Я думаю, что вы можете использовать этот способ без использования CSS -

<table>
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
    <tr>
        <td>baz</td>
    </tr>
</table>

Прямо сейчас вы используете элемент уровня блока, чтобы получить нежелательный результат. Таким образом, вы можете встроенный элемент, как span, small и т. Д.

<span>foo</span><span>bar</span><span>baz</span>

— Панкадж Бишт
источник

0

мы можем сделать это как

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>

— omnath
источник

0

<div class="cdiv">
<div class="inline"><p>para 1</p></div>
 <div class="inline">
     <p>para 1</p>
     <span>para 2</span>
     <h1>para 3</h1>
</div>
 <div class="inline"><p>para 1</p></div>

http://jsfiddle.net/f8L0y5wx/

— ИПАГ
источник

0

<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
    #div01, #div02, #div03 {
                                float:left;
                                width:2%;
    }   
 </style>
 <div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 //solution 2

 <style>
      #div01, #div02, #div03 {
                                  display:inline;
                                  padding-left:5px;
      }   
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 /* I think this would help but if you have any other thoughts just let me knw      kk */

— Ваа Рональд
источник

-1

Я просто стремлюсь сделать их фиксированной ширины, чтобы они в сумме составляли общую ширину страницы - возможно, будет работать, только если вы используете страницу фиксированной ширины. Также «плаваю».

— NFPPW
источник