CSS-стиль для горизонтального списка с пулей только между элементами
Я не уверен, как построить горизонтальный список, который выглядит так:
![Centered list with bullets between items]()
Вот правила:
- В списке есть неограниченное количество элементов.
- Каждый элемент должен быть на одной строке, а не на вторую строку.
- Несколько элементов могут находиться на одной линии, если есть место для них
- Если несколько элементов находятся в одной строке, они должны быть разделены разделителем
- Разделитель выглядит как пуля, но это может быть образ
- Нужно, чтобы он работал в современных браузерах, а также IE8+
То, что я не знаю, как сделать, это сделать пули появляться только между элементами, а не до или после каждой строки элементов.
Ответы
Ответ 1
Вот еще одна улучшенная версия. Я продолжал получать несогласованность при определенных ширинах страниц, где отсутствовали две пули, а не только последняя. т.е.
link1 · link2 · link3 ссылка4
link5 · link6
Я думаю, проблема заключалась в том, что удаление последнего разделителя пули может повлиять на поток текста, если ширина страницы была в порядке. Новый скрипт блокирует исходный поток текста, добавляя и удаляя литеральные разрывы строк.
У меня есть тот же скрипт, который будет запускаться каждый раз при изменении размера экрана, чтобы вы не застряли с неудобными разрывами строк.
<style>
ul { width: 700px; text-align : center }
ul li { display: inline; white-space: nowrap; }
ul li:after { content: " \00b7"; }
ul li.nobullet:after { content: none; }
</style>
<body onresize="processBullets()" onload="processBullets()">
<ul>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
</ul>
<body>
<script>
function processBullets() {
var lastElement = false;
$("br").remove(".tempbreak");
$("ul li").each(function() {
$(this).removeClass("nobullet");
if (lastElement && lastElement.offset().top != $(this).offset().top) {
$(lastElement).addClass("nobullet");
$(lastElement).append('<br class="tempbreak" />');
}
lastElement = $(this);
}).last().addClass("nobullet");
}
</script>
Ответ 2
Для тех из вас, кто не должен беспокоиться о IE8, это так же просто, как:
ul li { list-style: none; display: inline; }
ul li:after { content: " \00b7"; }
ul li:last-child:after { content: none; }
Ответ 3
Это решение соответствует всем требованиям OP, за исключением совместимости с IE8 (это было 2013 год).
Простая разметка. Нет JavaScript. Нет :last-child
Ссылка на CodePen
<ul>
<li><a>Profile Image</a></li>
<li><a>Name</a></li>
<li><a>Activity Information</a></li>
<li><a>Distance</a></li>
<li><a>Pace</a></li>
<li><a>Points Earned</a></li>
</ul>
ul { display:inline-block; padding:0; text-align:center }
li { display:inline }
li a { white-space:nowrap }
li:after { content:" "; letter-spacing:1em; background:center center no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAAnSURBVBhXY/Dz89MA4sNA/B9Ka4AEYQIwfBgkiCwAxjhVopnppwEApxQqhnyQ+VkAAAAASUVORK5CYII=); }
![enter image description here]()
Ответ 4
Для почти всех браузеров вы можете использовать last-child селектор CSS3 вместо JavaScript:
ul li { display: inline; white-space: pre; }
ul li:after { content: " \00b7 "; }
ul li:last-child:after { content: ""; }
white-space: pre останавливает обертывание в элементах списка (потому что обычно вы хотите, чтобы он обертывался между элементами списка), и это хак, который позволяет вам увеличивать пространство между элементами списка, добавляя пробелы во вторую строку.
u00b7 ⋅ (MIDDLE DOT) является стандартным символом Unicode для интерполяций, но вы также можете использовать u2022 • (BULLET), u2b24 ⬤ (BLACK LARGE CIRCLE), U+2043 ⁃ (HYPHEN BULLET) или любой другой символ юникода, который вы выберете.
Обратите внимание, что некоторые символы могут не поддерживаться на всех системах.
Ответ 5
Если вы не возражаете создать PNG изображение (с прозрачным фоном) пули (или другого разделителя), вы можете использовать естественное пространство между элементами списка, написанными с этим в качестве фона.
Если элементы списка переносятся на следующую строку, пробел --- и, следовательно, его фон --- не будут отображаться.
Это позволяет избежать проблем с макетом, связанных с пространством, занимаемым разделителем, а также избегать любого Javascript/jQuery, используя механизм компоновки браузера для выполнения этой работы. Вы можете отрегулировать пространство для разделителя с помощью атрибута word-spacing.
Вы должны убедиться, что в разметке нет других пробелов, которые в противном случае могли бы использоваться как естественное пространство. Вы могли бы использовать изображение с более высоким разрешением, чем 5x5 здесь, в сочетании с размером фона, чтобы оно все еще выглядело нормально при zooomed, но обратите внимание, что IE8 не поддерживает масштабирование фоновых изображений. Другой недостаток заключается в том, что если вы хотите изменить цвет, вам придется отредактировать PNG.
FIDDLE
Код, основанный на изменении ответа @bleuscyther:
CSS:
ul { max-width: 700px; padding: 0; text-align: center; }
ul li { display: inline; white-space: nowrap; }
ul .separator {
word-spacing: 1.1em;
background-repeat: no-repeat;
background-position: 50% 60%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}
HTML:
<ul>
<li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard College</a></li>
</ul>
Ответ 6
user2511031 решение почти идеально... это просто недействительный HTML. Там не должно быть SPAN вне LI, внутри UL.
Но это не значит, что нет идеального решения. Я нашел его!
Не нужно размещать пролеты в чистоте и очищать пробелы в разметке. Поместите необходимое пространство в содержимое псевдоэлемента ": after", примените к нему фоновое изображение.
Он делает то же самое!
ul { max-width: 700px; padding: 0; text-align: center; }
ul li { display: inline; white-space: nowrap; }
ul li:after {
content: " ";
word-spacing: 2em;
background-repeat: no-repeat;
background-position: 50% 60%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}
Здесь скрипка
Ответ 7
Я использовал ответ JavaThunder и изменил миддот на пулю, которая немного больше, используя этот код:
ul li:after { content: " \2022"; }
Ответ 8
http://jsfiddle.net/caramba/tSnnP/
<div>
<ul>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
</ul>
<ul>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
</ul>
</div>
<style type="text/css">
div {
white-space: nowrap;
width: 100%;
}
span {
display:inline-block;
margin:0 5px;
}
ul {
text-align:center;
}
ul li {
display:inline;
margin:20px;
}
.hide {
display:none;
}
.icon {
position:relative;
display:inline-block;
background-position:-1000px -1000px;
background-image:url(http://www.alexander-bown.com/wp-content/uploads/2011/05/big-black-dot.jpg);
background-repeat:no-repeat;
background-size:5px 5px;
width:5px;
height:5px;
}
.icon {
background-position:0px 0px;
top:-2px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul li:first-child').children('span').addClass("hide");
});
</script>
Ответ 9
Проще всего, все, что вам потребуется, это установить text-align: center на ul и display: inline-block на li в вашей таблице стилей. Вы можете использовать изображение в качестве разделителя, если хотите, используя :after псевдо класса на li.
Вот пример.
Ответ 10
Я просто использовал text-indent для успешного создания маркированного списка следующим образом:
HTML:
<ul class="horizontal">
<li>Payment</li>
<li>Check</li>
<li>Direct Deposit</li>
</ul>
CSS:
ul.horizontal li { list-style-type:disc; float: left; text-indent:-4px; margin-right:16px; }
Ответ 11
ul li {
display: inline;
text-align: center
}
.separator {
display: inline-block;
background-color: black;
width: 5px;
height: 5px;
border-radius: 45px;
vertical-align: middle;
}
<ul>
<li>item 1</li> <div class='separator'></div>
<li>item 2</li> <div class='separator'></div>
<li>item 3</li> <div class='separator'></div>
<li>item 4</li> <div class='separator'></div>
<li>item 5</li>
</ul>
Вы также можете создать это на JavaScript с помощью цикла и конкатенировать новый li для количества элементов списка, но, увидев, что ваше сообщение ничего не говорит о динамически сгенерированном списке, я оставлю его так же, как и сейчас.
Ответ 12
<table>
<tr>
<td>
<ul>
<li>First menu item</li>
</ul>
</td>
<td>
<ul>
<li>Second menu item</li>
</ul>
</td>
<td>
<ul>
<li>Third menu item</li>
</ul>
</td>
</tr>
</table>
