本文介绍了我如何加入< div>与显示:内联块?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在开发一个复杂的应用程序,我需要使用 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




  2. 的初始 参见下面的演示:

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

    这篇关于我如何加入&lt; div&gt;与显示:内联块?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 02:22