当前位置: 首页 > 面试题库 >

HTML List元素:将父级宽度分成相等的部分

勾岳
2023-03-14
问题内容

我有一个父母<ol>和几个<li>项目。

<ol style='width=800px;display :block;float:left;'>
   <li style='display :block;float:left;'> Item 1  </li>
   <li style='display :block;float:left;'>  Item 2 </li>
   <li style='display :block;float:left;'>  Item 3 </li>
   <li style='display :block;float:left;'>  Item 4 </li> 
</ol>

有什么办法可以将我的列表项以均等划分父级宽度(800px)的方式排列,并且每个项目都具有相同的宽度?即每个<li>将采取200px宽度。

我不想对值进行硬编码。是否有任何样式属性可以做到这一点?

我不想对20%之类的宽度进行硬编码,因为列表项是动态添加的。有时可能是4或5或6


问题答案:
  • 有关详细信息display: table-cell:在div上使用display:table-cell`是否有缺点?
  • [table-layout: fixed确保li元素的宽度相等。

CSS:

ol {
    width: 400px;
    /*width: 800px;*/

    display: table;
    table-layout: fixed; /* the magic dust that ensures equal width */
    background: #ccc
}
ol > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}

HTML:

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>


 类似资料:
  • 问题内容: 尝试最多包含5个项目且只有3个项目的flexbox导航,但它并未在所有元素之间平均分配宽度。 问题答案: 您链接到的文章中没有提到一个重要的部分,那就是。默认为。 如果指定的flex-basis是auto,则使用的flex基础是flex项目的main size属性的值。(它本身可以是关键字auto,它会根据其内容来调整弹性项目的大小。) 每个伸缩项目都有一个类似于其初始大小的。然后,从

  • 本文向大家介绍写出不定宽度的子级div,在相对于固定宽度的父级元素水平居中的布局相关面试题,主要包含被问及写出不定宽度的子级div,在相对于固定宽度的父级元素水平居中的布局时的应答技巧和注意事项,需要的朋友参考一下

  • 问题内容: 将列表分为大致相等的最佳方法是什么?例如,如果列表有7个元素并将其分为2部分,则我们要在一部分中获得3个元素,而另一部分应具有4个元素。 我正在寻找类似的东西,打破成部分。 上面的代码给出了3个块,而不是3个块。我可以简单地进行转置(对此进行迭代,并取每列的第一个元素,将其称为第一部分,然后取其第二,然后将其置于第二部分,依此类推),但这样会破坏项目的顺序。 问题答案: 这是一个可行的

  • 问题内容: 我有一个字符串,我想分成N个相等的部分。 例如,假设我有一个长度为128的字符串,我想将其分成4个长度为32的块;也就是说,第一个32个字符,然后第二个32个字符,依此类推。 我怎样才能做到这一点? 问题答案: import textwrap print textwrap.wrap(“123456789”, 2) #prints [‘12’, ‘34’, ‘56’, ‘78’, ‘9’

  • 问题内容: 无论如何,有没有将ArrayList拆分成不同的部分,直到运行时才知道它的大小?我知道有一种方法叫做: 但我们需要明确提及列表的起始和结束范围。我的问题是,我们得到一个包含帐号的数组列表,该数组具有类似2000,4000个帐号的数据(在编码期间不会知道这些数字),我需要将此帐号传递给PL / SQL的IN查询,如下IN不支持超过1000个值,我试图将其拆分成多个块并将其发送给查询 注意

  • 我有一个,我希望它填满视图的整个宽度,但是如果它比大,它应该保持这个大小。我尝试使用,但它不能用于。