Question

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

   <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都有不同的宽度。

由于

Answer 1

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

Answer 2

不，您无法为内联显示的任何内容指定宽度，您已将LI设置为。相反，您通常希望使用允许设置宽度的display: block; float: left;。

Answer 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;
}

Answer 4

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

Answer 5

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

Answer 6

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

我们可以为li分配宽度

6 个答案: