如何使 div 元素内嵌显示？

StackOverflow https://stackoverflow.com/questions/224602

  •  03-07-2019
  •  | 
  •  

题

给定这个 HTML：

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

如何让它们像这样内联显示：

富巴巴兹

不是这样的：

富
酒吧
巴兹

有帮助吗？

解决方案

那就是其他的东西：

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 -->

其他提示

内联div是网络<！>放大器的狂热者;应该被打败直到它成为一个跨度（至少9次中的10次）...... 

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

...回答原来的问题...

尝试这样写：

div { border: 1px solid #CCC; }
    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>

已经阅读了这个问题和答案了几次，我所能做的就是假设已经进行了相当多的编辑工作，而我怀疑是因为没有提供足够的答案而给你错误的答案信息。我的线索来自于使用br标签。

向达里尔道歉。我读了class = <！> quot; inline <！> quot; as style = <！> quot; display：inline <！> quot;。即使你使用语义上有问题的类名，你也有正确的答案; - ）

错过使用divs提供结构布局而不是文本布局对我来说太普遍了。

如果你想在内部元素中添加多个内联元素，那么你应该浮动那些div而不是将它们内联。

Floated divs：

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

内联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>
<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的宽度是流畅的，因此如果要控制行为，请随意在其上放置宽度。

谢谢， 史蒂夫

使用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>

你应该使用 <span> 代替 <div> 为了正确的方法 排队. 。因为 div 是块级元素，而您的要求是内联块级元素。

这是根据您的要求的 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;
}

如前所述，显示：内联可能就是你想要的。有些浏览器也支持内联块。

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

只需使用带有<！>的包装div; float：left <！> quot;并将箱子放在里面也包含浮动：左：

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>
好吧，对我来说：

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

<span>？

我会使用跨度或向左浮动div。浮动的唯一问题是你必须事后清除浮点数或包含div必须将溢出样式设置为auto

我知道有人说这是一个糟糕的主意，但如果你想做一些像瓷砖图像那样带有评论的东西，它实际上可能很有用。例如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，现在它神奇地成为内联块元素。

您需要包含三个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'都保存在'contains'div中。

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

我认为你可以使用这种方式而不使用任何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>

我们可以这样做

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

<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/ 

<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 */

我只是倾向于使它们固定宽度，以便它们相加到页面的总宽度 - 可能只有在使用固定宽度页面时才有效。同样<！>“float <！>”。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top