Установка границы для первого элемента в строке - PullRequest
Новая
       3

Установка границы для первого элемента в строке

0 голосов
/ 01 октября 2018

(я новичок в веб-дизайне) У меня есть список ссылок (разделов на текущей странице), которые могут расширяться до нескольких строк в зависимости от размера области просмотра.Ссылки разделены вертикальной линией (border-left):

Current results

Я хочу избежать отображения границы для первого элемента каждой строки.Мне удалось избежать этого для первого ребенка, но я не могу понять, как это сделать для первого элемента каждой строки.Примерно так:

Expected results

Обратите внимание, что этот список, вероятно, отличается для каждой страницы.

Вопрос : Какдобиться такого эффекта?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>, как показано в примере.

Ответы [ 3 ]

0 голосов
/ 02 октября 2018

Вот простой способ, где вы можете использовать псевдоэлемент, чтобы скрыть первые границы. 

.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>
0 голосов
/ 02 октября 2018

Хотя я предпочитаю решения, предложенные Тайлером Ропером и Temani Afif , потому что они показывают правильный результат с самого первого рендеринга (особенно это заметно на страницах с большим количеством дополнительных ресурсов), яхочу поделиться другим решением (с использованием 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>

Как видно, приведенный выше код управляет случаем, когда ссылки центрированы на экране, а не выровнены по левому краю.

Примечание: поскольку центрирование текста не было частью моего первоначального вопроса (такое требование появилось после того, как я реализовал принятый ответ), я не считаю, что для правильности других предложенных ответов я просто публикую этот вклад дляполнота.

0 голосов
/ 01 октября 2018

Установите 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>
...