我如何加入< div>与显示：内联块？ [英] How I can join <div> with display: inline-block?

问题描述

我正在开发一个复杂的应用程序，我需要使用 div 来表示一些信息; 不 表。我的具体问题是盒子的信息何时组织，内容是分开的。

这是我的代码：

  #content {white-space：nowrap;}＃item1 {width：500px;}＃item2，＃item3 {width：400px;} .item_ul {list-style-type：none;白色空间：nowrap; overflow-x：auto;}。item_li {border：solid 1px black; display：inline-block;}  

< div id = contentstyle =overflow：scroll> < ul id =item_ul> < li id =item1class =item_li> a< / li> < li id =item2class =item_li> b< / li> < li id =item3class =item_li> c< / li> < / ul>< / div>

转换我的表现形式，如下图所示：

谢谢！

解决方案

1. 将 item_ul 设为 font-size：0 以移除 inline 元素的空间特性现在将字体大小重置为 item_li




的初始 参见下面的演示：



#content {white -space：nowrap;}＃item1 {width：500px;}＃item2，＃item3 {width：400px;}＃item_ul {list-style-type：none;白色空间：nowrap;溢出-x：auto; font-size：0;}。item_li {border：solid 1px black;显示：inline-block; font-size：initial;}

< div id = contentstyle =overflow：scroll> < ul id =item_ul> < li id =item1class =item_li> a< / li> < li id =item2class =item_li> b< / li> < li id =item3class =item_li> c< / li> < / div>

在标记中使用<！ - - &> （并且是的，您正确地编写了所有 li 单行） - 请参阅下面的演示：

$ b

＃item1 {width：400px;}＃item_ul {list-style-type：none;}＃item1 { #content {white-space：nowrap;}＃item1 {width：500px;}＃item2，＃item3 {width：400px;白色空间：nowrap; overflow-x：auto;}。item_li {border：solid 1px black; display：inline-block;}  

< div id = contentstyle =overflow：scroll> < ul id =item_ul> < li id =item1class =item_li> a< / - ><！ - - >< li id =item2class =item_li> b< / li><！ - - >< li id =item3class =item_li> c< / li> < / div>




I am developing a complex application and I need to use div for representing some information; NO table. My specific problem is when the box's information is organized, the content is separated.

This is my code:

#content {
  white-space: nowrap;
}
#item1 {
  width: 500px;
}
#item2,
#item3 {
  width: 400px;
}
.item_ul {
  list-style-type: none;
  white-space: nowrap;
  overflow-x: auto;
}
.item_li {
  border: solid 1px black;
  display: inline-block;
}

<div id="content" style="overflow:scroll">
  <ul id="item_ul">
    <li id="item1" class="item_li">
      a
    </li>
    <li id="item2" class="item_li">
      b
    </li>
    <li id="item3" class="item_li">
      c
    </li>
  </ul>
</div>

I would like transform my representation as in the next image:

Thank you!

解决方案

One of the things that you can do is:

1. Set font-size: 0 for item_ul to remove the space characteristic of inline elements

2. Now reset the font-size to initial for the item_li

See demo below:

#content {
  white-space: nowrap;
}
#item1 {
  width: 500px;
}
#item2,
#item3 {
  width: 400px;
}
#item_ul {
  list-style-type: none;
  white-space: nowrap;
  overflow-x: auto;
  font-size: 0;
}
.item_li {
  border: solid 1px black;
  display: inline-block;
  font-size: initial;
}

<div id="content" style="overflow:scroll">
  <ul id="item_ul">
    <li id="item1" class="item_li">
      a
    </li>
    <li id="item2" class="item_li">
      b
    </li>
    <li id="item3" class="item_li">
      c
    </li>
  </ul>
</div>

Another option is to use <!-- --> in the markup (and yes you are right write all the li in a single line) - see demo below:

#content {
  white-space: nowrap;
}
#item1 {
  width: 500px;
}
#item2,
#item3 {
  width: 400px;
}
#item_ul {
  list-style-type: none;
  white-space: nowrap;
  overflow-x: auto;
}
.item_li {
  border: solid 1px black;
  display: inline-block;
}

<div id="content" style="overflow:scroll">
  <ul id="item_ul">
    <li id="item1" class="item_li">
      a
    </li><!--
    --><li id="item2" class="item_li">
      b
    </li><!--
    --><li id="item3" class="item_li">
      c
    </li>
  </ul>
</div>

这篇关于我如何加入< div>与显示：内联块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！