Мы можем назначить ширину li

У меня есть следующая html-страница с UL и LI, я пытаюсь назначить ширину для каждого 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 имеет разную ширину.

Спасибо

Ответы

Ответ 1

Нет, вы не можете назначить ширину всему, что отображается в строке, на которую вы установили LI. Вместо этого вы чаще всего хотите использовать display: block; float: left;, который позволит установить ширину.

Ответ 2

Попробуйте заменить display:inline на display:inline-block

Ответ 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 what you want */
 float: left;
 margin-right: 10px;
}

Ответ 4

Вы указываете li display: inline и width не относится к встроенным элементам. Вам нужно будет использовать альтернативу для размещения элементов рядом друг с другом, таких как их плавание.

Ответ 5

Чтобы больше узнать о предыдущих двух ответах, вы не можете указать ширину в строке, но вы можете проверить пример того, как это сделать здесь

Ответ 6

Вам придется работать над своим кодом, потому что вы не можете назначить ширину встроенным элементам. Но это можно решить, установив дисплей на блокировку и поместив его.