мы можем присвоить ширину ли - PullRequest
Новая
       3

мы можем присвоить ширину ли

14 голосов
/ 23 апреля 2010

У меня есть следующая 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 имеет разную ширину.1005 * Спасибо

Ответы [ 5 ]

23 голосов
/ 23 апреля 2010

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

12 голосов
/ 23 апреля 2010

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

1 голос
/ 23 апреля 2010

Попробуйте это 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;
}
0 голосов
/ 23 апреля 2010

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

0 голосов
/ 23 апреля 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...