CSS: горизонтальный, разделенный запятыми список с фиксированной <li>шириной - PullRequest
Новая
       44

CSS: горизонтальный, разделенный запятыми список с фиксированной <li>шириной

1 голос
/ 25 мая 2010

Я хотел бы получить следующую структуру: 

[gfhtfg..., kgjrfg..., asd,      mrhgf,   ]  
 ^-------^  ^-------^  ^-------^ ^-------^  
     X          X          X         X
(X = a fixed length)

У меня есть <div> с фиксированной длиной и внутри него горизонтальный, разделенный запятыми список (ul) ссылок.
Элементы <li> должны иметь фиксированную ширину, поэтому, если ссылки превышают фиксированную длину, будет отображаться многоточие (с использованием свойства text-overflow).

Я знаю два способа сделать список горизонтальным. Один использует display: inline, а другой - свойство float.

  • При первом подходе я не могу установить фиксированную ширину, потому что спецификация CSS не позволяет устанавливать ширину встроенных элементов.
  • Второй подход создает беспорядок: O
  • Установка float для элемента <a> с намерением ограничить ширину там отделяет его от запятых.

Нет проблем с совместимостью браузера, мне нужно только поддерживать WebKit.

Я включил код, с которым пытался работать: 

<!DOCTYPE html>
<html lang="en">
<head>
 <title>a title</title>
 <style>
  body { font-family: arial; font-size: 10pt; }

  div {
   height: 30px;
   width: 300px;
   background: #eee;
   border: 1px solid #ccc;
   text-align: center;
  }

  ul { margin: 0px; padding: 0px; }
  ul li:after { content: ","; }
  ul li:last-child:after { content: ""; }
  ul li a { text-decoration: none; color: #666; }

  ul li {
   margin: 0px;
   padding: 0px;
   list-style: none;
   overflow: hidden;
   text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
   /* Inline elements can't have a width (and they shouldn't according to the specification */
   display: inline;
   width: 30px;
  }
 </style>
</head>
<body>

<div>
 <ul>
  <li><a href="#">a certain link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">once again</a></li>
  <li><a href="#">another one</a></li>
 </ul>
</div>

</body>
</html>

Спасибо.

Ответы [ 4 ]

9 голосов
/ 25 мая 2010 
...
ul li a {
 text-decoration: none; color: #666; 
 display: inline-block; 
 max-width: 50px; /* 'X' minus gutter */
 white-space: nowrap; 
 text-overflow: ellipsis; 
 overflow:hidden;
}
ul li {
 margin: 0px;
 padding: 0px;
 list-style: none;
 white-space: nowrap;
 display: inline-block;
 width: 60px; /* 'X' */
}
...

My 2 ¢

3 голосов
/ 25 мая 2010

Установите для атрибута display элементов li значение inline-block. Он полностью совместим с браузерами WebKit. Вы не можете указать размеры элемента уровня inline, но можете добавить элемент уровня блока. inline-block - это удачная среда в вашем случае - она ​​позволяет размеры, но отображает inline. Я думаю, что это лучшая альтернатива поплавкам и клирам.

1 голос
/ 25 мая 2010

Вы пробовали display: inline-block и устанавливали фиксированную ширину? Это позволяет вам иметь встроенные элементы, размер которых можно изменять, как тег img.

0 голосов
/ 25 мая 2010

Я пробовал display: inline-block и раньше, но если в ссылках есть пробелы, слова вырвутся на новую строку.
Дальнейший случайный поиск показал, что white-space: nowrap; решает эту проблему, и поэтому окончательное решение заключается в добавлении этих свойств к элементу <li>: 

ul li {
 width: 30px;
 display: inline-block;
 white-space: nowrap;
}

Спасибо за ваши ответы.

EDIT: на самом деле запятые не отображаются.
Удаление свойств overflow и text-overflow показывает, что элементы <li> перекрываются и запятые скрыты с остальным текстом.

...