问题描述
我正在开发一个复杂的应用程序,我需要使用 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>
谢谢!
-
将 item_ul 设为 font-size:0 以移除 inline 元素的空间特性现在将字体大小重置为 item_li
Set font-size: 0 for item_ul to remove the space characteristic of inline elements
Now reset the font-size to initial for the item_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:
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>与显示:内联块?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!