如何使div元素内联显示?

给定这个HTML:

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

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

Foo bar baz

不是这样的:

喷火酒吧巴兹

当前回答

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

2014-08-20 03:54:20

其他回答

如前所述，display:inline可能是您想要的。一些浏览器还支持内联块。

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

2008-12-31 15:06:49

在IE6/7中使用display:带边距和媒体查询的inline-block:

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

2012-01-07 00:06:30

这对我来说很管用。我正在与bootstrap工作，我想有单选按钮内联:

                <div class="form-group form-inline-radio">
                    <div class="form-check form-radio-outline form-radio-primary mb-3">
                        <input type="radio" name="formRadio4" id="formRadio4" checked="" class="form-check-input">
                        <label for="formRadio4" class="form-check-label"> Radio Outline Warning </label>
                    </div>
                    <div class="form-check form-radio-outline form-radio-primary mb-3">
                        <input type="radio" name="formRadio4" id="formRadio4" checked="" class="form-check-input">
                        <label for="formRadio4" class="form-check-label"> Radio Outline Warning </label>
                    </div>
                </div>

而CSS:

.form-inline-radio {
    display: flex;
    overflow: hidden;
}

.form-check {
    margin-right: 10px;
}

2022-01-21 09:19:40

对我来说:

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

2014-12-22 10:31:18

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

2016-02-08 02:29:52

如何使div元素内联显示?

推荐文章

最新文章

标签