CSS-стиль для горизонтального списка с пулей только между элементами

Я не уверен, как построить горизонтальный список, который выглядит так:

Вот правила:

В списке есть неограниченное количество элементов.
Каждый элемент должен быть на одной строке, а не на вторую строку.
Несколько элементов могут находиться на одной линии, если есть место для них
Если несколько элементов находятся в одной строке, они должны быть разделены разделителем
Разделитель выглядит как пуля, но это может быть образ
Нужно, чтобы он работал в современных браузерах, а также 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=); }

Ответ 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>