Question

我正在尝试在导航菜单（标题）之间添加分隔符。

因此基本上将其设为A | B | C

我尝试添加以下代码：

这是一个编辑：

因此，从中检索标题和URL的片段如下：

<li class="dropdown{% if link.active %} selected{% endif %}{% if submenu_type == 'menu_two_columns' %} tt-megamenu-col-02{% elsif submenu_type == 'megamenu' %} megamenu{% else %} tt-megamenu-col-01{% endif %}" {{ block.shopify_attributes }}>

  <a href="{{ link.url }}" class=".link">{{ link.title }}</a>

然后将此代码添加到theme.css

.link {
  position: relative;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  color: #333;
  text-decoration: none;
  background-color: #ddd;
  transition: all 0.2s ease;
}

.link:before {
  content: '|';
  position: absolute;
  left: -1px;
  line-height: 40px;
}

.link:first-child:before {
  content: '';
}

.link:hover {
  background-color: #aaa;
  color: #000;
}

但是，我没收到|

Answer 1

编辑

我已经获取了您的确切更新的CSS，并在.link容器中放置了几个nav锚点。您可以看到生成的内容（分隔栏）按照您的样式工作。我所做的唯一更改（不影响渲染）是将content: ''替换为content: none。

.link {
  position: relative;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  color: #333;
  text-decoration: none;
  background-color: #ddd;
  transition: all 0.2s ease;
}

.link:before {
  content: '|';
  position: absolute;
  left: -1px;
  line-height: 40px;
}

.link:first-child:before {
  content: none;
}

.link:hover {
  background-color: #aaa;
  color: #000;
}

<nav>
  <a href="#" class="link">A</a>
  <a href="#" class="link">B</a>
  <a href="#" class="link">C</a>
</nav>

jsFiddle

这是一个使用伪类在CSS内容中创建条形分隔符（|）的示例。这是处理此类细节的首选方法，因为您可以更好地控制内容的样式和位置。我还使用CSS否定符 not 在最后一个孩子之后添加分隔符。为了使生成的内容垂直居中，我使用了top: 50%和transform: translateY(-50%)来占实际分隔符高度的一半。

.link{
   margin: 0 5px;
   background-color: #DDD;
   position: relative;
}

.link:not(:last-child)::after {
  content: '';
  position: absolute;
  display: block;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-right: 2px solid #000;  
  height: 100%;
}

<nav>
  <a href="#" class="link">A</a>
  <a href="#" class="link">B</a>
  <a href="#" class="link">C</a>
</nav>

jsFiddle

Answer 2

您将width：1px设置为链接类，这样就不会显示该类的内容，只需替换您的CSS代码

.link{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

使用

.link{
   height: 40px;
   width: auto;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Answer 3

尝试一下。

ul{
  overflow:hidden;
}
li{
  list-style:none;
  position:relative;
  float:left;
  padding:0 15px;
}
li:first-child{
  padding-left:0;
}
li:last-child{
  padding-right:0;
}
li:not(:last-child):after{
  position:absolute;
  border:1px solid #000; 
  height:100%;
  content:"";
  right:0;
}
li a{
  text-decoration:none;
}

<div>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 1</a></li>
  </ul>
</div>

Answer 4

在每个链接的左侧添加边框：

.link {
  border-left: 2px solid #fff;
}

然后添加一个CSS规则，以使用first-child选择器取消第一个链接上的边框：

.link:first-child {
  border-left: none;
}

重要的是，您的链接要表现得像链接，占用足够的空间等。我在这里使用了自己的方法，可以随意获取自己喜欢的东西。

.menu {
  background: red;
  display: flex;
}

.link {
  position: relative;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  color: #333;
  text-decoration: none;
  background-color: #ddd;
  transition: all 0.2s ease;
}

.link:before {
  content: '|';
  position: absolute;
  left: -1px;
  line-height: 40px;
}

.link:first-child:before {
  content: '';
}

.link:hover {
  background-color: #aaa;
  color: #000;
}

<nav class="menu">
  <a href="/home" class="link">Home</a>
  <a href="/about" class="link">About</a>
  <a href="/contact" class="link">Contact</a>
  <a href="/blog" class="link">Blog</a>
</nav>

Answer 5

在标签之间使用水平线

.menu {
      background: #ddd;
      display: flex;
    }
    
    .link {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      padding: 0 30px;
      color: #333;
      text-decoration: none;
      background-color: #ddd;
      transition: all 0.2s ease;
      
    }
    hr{
    margin:0px;
    color:blue;
    }
    
    .link:first-child {
      border-left: none;
    }
    
    .link:hover {
      background-color: #aaa;
      color: #000;
    }

<nav class="menu">
      <a href="/home" class="link">Home</a><hr>
      <a href="/about" class="link">About</a><hr>
      <a href="/contact" class="link">Contact</a><hr>
      <a href="/blog" class="link">Blog</a><hr>
    </nav>

什么是捕手，只需在每个链接之间放置一个hr标签，就可以得到线路。 hr表示水平线，但由于显示设置为行内块且高度已设置，因此可以用作垂直线

添加分隔线|菜单之间

5 个答案:

编辑