Установка границы для первого элемента в строке
(Я новичок в веб-дизайне). У меня есть список ссылок (разделов на текущей странице), которые могут расширяться до нескольких строк в зависимости от размера области просмотра. Ссылки разделяются вертикальной линией (граница слева):
Я хочу, чтобы граница не отображалась для первого элемента каждой строки. Мне удалось избежать этого для первого потомка, но я не могу понять, как это сделать для первого элемента каждой строки. Что-то вроде:
Обратите внимание, что этот список, вероятно, различается для каждой страницы.
Вопрос: Как добиться такого эффекта? CSS? JavaScript?
.links a {
display: inline-block;
}
.links a:not(:first-child) {
border-left: 1px solid black;
padding-left: 15px;
}
.links a:not(:last-child) {
padding-right: 15px;
}<div class = "links">
<a href = "#">Link number 1</a>
<a href = "#">Link number 2</a>
<a href = "#">Link number 3</a>
<a href = "#">Link number 4</a>
<a href = "#">Link number 567</a>
<a href = "#">Link number 6</a>
<a href = "#">Link number 7</a>
<a href = "#">Link number 8</a>
<a href = "#">Link number 9</a>
</div>PS: display: inline-block предназначен только для того, чтобы избежать переноса между строками. Я бы хотел избежать изменения структуры HTML, так как это затрагивает многие страницы. Такие ссылки всегда вложены в <div class = "links"></div>, как показано в примере.
О ... а что, если на страницах разный набор ссылок? один конкретный CSS для каждого? Я обновлю вопрос, чтобы прояснить это ... может быть какой-нибудь JS?
Вероятно, это был бы единственный выход.
Ваш динамический список представляет собой список слов, поэтому единственный способ, которым я представляю самый лучший с точки зрения производительности, - это получить среднюю ширину символа (число, букву) и вычислить @media queries в CSS для этих размеров.
@Paulie_D «Невозможно сделать это динамически с помощью CSS». в то время как «динамическая» часть остается верной, конкретный запрос OP возможен только с помощью CSS. Хотя, полагаю, мой ответ можно было бы считать обходным решением.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Установите overflow: hidden; на контейнер и дайте своим ссылкам отрицательный left-margin. Вы можете нейтрализовать отрицательную маржу на других ссылках, просто удвоив padding-right.
.links {
overflow: hidden;
}
.links a {
display: inline-block;
border-left: 1px solid black;
padding-left: 15px;
margin-left: -15px;
}
.links a:not(:last-child) {
padding-right: 30px;
}<div class = "links">
<a href = "#">Link number 1</a>
<a href = "#">Link number 2</a>
<a href = "#">Link number 3</a>
<a href = "#">Link number 4</a>
<a href = "#">Link number 567</a>
<a href = "#">Link number 6</a>
<a href = "#">Link number 7</a>
<a href = "#">Link number 8</a>
<a href = "#">Link number 9</a>
</div>Как это работает
Левое поле и левая граница находятся присутствуют, однако отрицательное поле вытесняет их из контейнера. Затем мы скрываем все, что находится за пределами контейнера, с помощью overflow: hidden.
В приведенном ниже примере показано, что на самом деле происходит при удалении overflow: hidden; и присвоении контейнеру границы:
.links {
border: 1px solid red;
overflow: visible;
margin-left: 30px;
}
.links a {
display: inline-block;
border-left: 1px solid black;
padding-left: 15px;
margin-left: -15px;
}
.links a:not(:last-child) {
padding-right: 30px;
}<div class = "links">
<a href = "#">Link number 1</a>
<a href = "#">Link number 2</a>
<a href = "#">Link number 3</a>
<a href = "#">Link number 4</a>
<a href = "#">Link number 567</a>
<a href = "#">Link number 6</a>
<a href = "#">Link number 7</a>
<a href = "#">Link number 8</a>
<a href = "#">Link number 9</a>
</div>Спасибо! работает безупречно! Можно ли изменить его, чтобы он работал, если у .links есть text-align: center? Это изменение дизайна для подмножества страниц ... следует ли мне опубликовать его как отдельный вопрос или расширить этот?
Мне удалось решить эту конкретную проблему с помощью JS, спасибо за вашу помощь!
Вот простой способ скрыть первые границы с помощью псевдоэлемента.
.links {
overflow: hidden;
position:relative;
width:600px;
animation:change 4s linear infinite alternate;
}
.links:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:1px;
background:#fff;
}
.links a {
display: inline-block;
border-left: 1px solid black;
padding-left: 15px;
}
@keyframes change {
to{width:160px}
}<div class = "links">
<a href = "#">Link number 1</a>
<a href = "#">Link number 2 5q4d </a>
<a href = "#">Link number 3</a>
<a href = "#">Link number 4</a>
<a href = "#">Link number 567</a>
<a href = "#">Link number 6</a>
<a href = "#">Link number 7 dqsd dqs</a>
<a href = "#">Link number 8</a>
<a href = "#">Link number 9</a>
</div>Хотя я предпочитаю решения, предложенные Тайлер Ропер и Темани Афиф, потому что они показывают правильный результат с самого первого рендеринга (особенно это заметно на страницах с множеством дополнительных ресурсов), я хочу поделиться другим решением (с использованием JavaScript), вдохновленным этот другой ответ.
$(document).ready(function() {
fn = function() {
var prevTop = -1;
$("a", $(".links")).each(function() {
var link = $(this);
var top = link.offset().top;
if (top == prevTop) {
link.attr("class", "border");
} else { // new line
prevTop = top;
link.removeClass("border"); // in case 'border' was previously added
}
});
};
$(window).resize(fn);
fn();
});.links {
text-align: center;
}
.links a {
display: inline-block;
padding-left: 15px;
padding-right: 15px;
}
.links a.border {
border-left: 1px solid black;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "links">
<a href = "#">Link number 1</a>
<a href = "#">Link number 2</a>
<a href = "#">Link number 3</a>
<a href = "#">Link number 4</a>
<a href = "#">Link number 567</a>
<a href = "#">Link number 6</a>
<a href = "#">Link number 7</a>
<a href = "#">Link number 8</a>
<a href = "#">Link number 90</a>
</div>Как видно, приведенный выше код управляет случаем, когда ссылки расположены по центру экрана, а не по левому краю.
Примечание: поскольку центрирование текста не было частью моего исходного вопроса (такое требование появилось после того, как я реализовал принятый ответ), я не считаю, что для правильности других предложенных ответов я просто публикую этот вклад для полноты.
Вам понадобятся медиа-запросы. Невозможно сделать это динамически с помощью CSS. Он не знает, когда предметы оборачиваются.