How do you make div elements display inline?

2019-01-01 06:09发布

站内问答 / HTML/CSS
1978 19 4

Given this HTML:

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

How do you make them display inline like this:

foo bar baz

not like this:

foo
bar
baz

标签： css line html
举报
19条回答
一个人的天荒地老
2楼-- · 2019-01-01 06:49

I just tend to make them fixed widths so that they add up to the total width of the page - probably only works if you are using a fixed width page. Also "float".

查看更多
0人赞 添加讨论(0) 举报
刘海飞了
3楼-- · 2019-01-01 06:53

we can do this like

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
查看更多
0人赞 添加讨论(0) 举报
怪性笑人.
4楼-- · 2019-01-01 06:56

Use display:inline-block with a margin and media query for 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>
查看更多
0人赞 添加讨论(0) 举报
呛了眼睛熬了心
5楼-- · 2019-01-01 06:56

<span> ?

查看更多
0人赞 添加讨论(0) 举报
无色无味的生活
6楼-- · 2019-01-01 06:57

I would use spans or float the div left. The only problem with floating is that you have to clear the float afterwards or the containing div must have the overflow style set to auto

查看更多
0人赞 添加讨论(0) 举报
高级女魔头
7楼-- · 2019-01-01 06:57 
<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 */
查看更多
0人赞 添加讨论(0) 举报
1 2 3 4 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)