我们可以将宽度分配给 li答案

【问题标题】：can we assign width to li我们可以将宽度分配给 li
【发布时间】：2011-02-11 14:00:47
【问题描述】：

我有以下带有 UL 和 LI 的 html 页面，我尝试为每个 LI 分配宽度，但看不到成功

   <html>
   <head>
   <style type="text/css"> 

   ul
   { 
      overflow-x:hidden;
     white-space:nowrap; 
     height: 1em;
      width: 100%;
     } 

     li
  { 
    display:inline;
     padding-right:10px;
      }       
      </style>
    </head>
    <body>

    <ul> 
        <li style="width:100px">abcdefghijklmonpqrstuvwxyz</li> 
      <li>abcdefghijklmonpqrstuvwxyz</li> 
   <li>abcdefghijklmonpqrstuvwxyz</li> 
   <li>abcdefghijklmonpqrstuvwxyz</li> 
    <li>abcdefghijklmonpqrstuvwxyz</li> 
     <li>abcdefghijklmonpqrstuvwxyz</li> 
      <li>abcdefghijklmonpqrstuvwxyz</li> 
    </ul> 

    </body>
   </html>

因为我的每个 LI 都有不同的宽度。

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

尝试将您的display:inline 替换为display:inline-block

【讨论】：

这可以解决问题，除非您关心保持您的代码符合 XHTML。不完全跨浏览器支持内联块：quirksmode.org/css/display.html#t03
+1 这应该是做 OP 想要的方式。但是 IE（6 和 7？）只会将display: inline-block; 应用于自然内联的元素（例如span），因此对于旨在与过时的浏览器。

【解决方案2】：

不，您不能将宽度分配给内联显示的任何内容，您已将 LI 设置为。相反，您通常希望使用 display: block; float: left; 来设置宽度。

【讨论】：

【解决方案3】：

试试这个 CSS

ul {
 white-space: nowrap;
 height: 1em;
 width: 100%;
}

li {
 list-style-type: none;
 width: 100px;
 overflow-x: auto; /* change to hidden if that's what you want */
 float: left;
 margin-right: 10px;
}

【讨论】：

【解决方案4】：

您提供的 lis display: inline 和 width不适用于内联元素。您需要使用替代方法将元素彼此并排放置，例如浮动它们。

【讨论】：

【解决方案5】：

要提供有关前两个答案的更多信息，您无法指定内联宽度，但您可以查看有关如何执行此操作的示例here

【讨论】：

【解决方案6】：

您必须处理您的代码，因为您无法为内联元素分配宽度。但这可以通过将显示设置为阻止并浮动来解决。

【讨论】：