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

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

225 голосов
/ 22 октября 2008

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

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

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

Foo Bar Baz

не так:

Foo
бар
баз

Ответы [ 19 ]

246 голосов
/ 31 декабря 2008

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

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

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

245 голосов
/ 22 октября 2008

Это что-то еще: 

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 -->
167 голосов
/ 22 октября 2008

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

div { border: 1px solid #CCC; }
    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>
32 голосов
/ 31 декабря 2008

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

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

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

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

Число с плавающей точкой: 

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

Встроенные 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>

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

Спасибо, Стив

23 голосов
/ 07 января 2012

Используйте 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>
10 голосов
/ 10 ноября 2015

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

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

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

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

  • с использованием простого display:inline-block;
  • или используя float:left;

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

Пример один 

div {
    display: inline-block;
}

Пример два 

div {
    float: left;
}

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

.main-div:after {
    content: "";
    clear: both;
    display: table;
}
7 голосов
/ 20 сентября 2011

Просто используйте 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>
7 голосов
/ 31 декабря 2008

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

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

6 голосов
/ 22 декабря 2014

хорошо, для меня: 

<style type="text/css">
    div{
        position: relative;
        display: inline-block;
        width:25px;
        height:25px;
    }
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
5 голосов
/ 22 октября 2008

<span>?

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...