Question

我要编辑我朋友的Wordpress主页。他使用了一个免费的模板，想要添加一个分隔符＆＃34; |＆＃34;在他的每个菜单项之后。

我试过这个。

#menu-mainmenu li + li:before {
    content: " | ";
    padding: 0 15px;
}

格式看起来像这样

<ul id="menu-mainmenu">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>    
</ul>

管道出现在

-Tag。

这就是我想做的事情

Answer 1

我必须在这里做出很多猜测，因为你没有为你想要达到的目标提供太多的代码或解释，但我想我已经设法创造了你想要的整体外观。

我创造了两种方法，一种适用于任何人，另一种适用于所有人，但在你的情况下专门工作

排名第一：

#menu-mainmenu li {
  position: relative;
  display: inline-block;
  float: left;
}

#menu-mainmenu li:not(:first-child):after {
  content: " | ";
  position: relative;
  display: inline-block;
  float: left;
  margin: 0 15px;
}

<ul id="menu-mainmenu">
  <li>HOME</li>
  <li>ABOUT</li>
  <li>...</li>
  <li>...</li>
</ul>

第二名：

#menu-mainmenu li {
  position: relative;
  display: inline-block;
  float: left;
}

#menu-mainmenu li.line {
  margin: 0 15px;
}

<ul id="menu-mainmenu">
  <li>HOME</li>
  <li class="line">|</li>
  <li>ABOUT</li>
  <li class="line">|</li>
  <li>...</li>
  <li class="line">|</li>
  <li>...</li>
</ul>

Answer 2

我会使用:before代替#menu-mainmenu li { display: inline-block; } #menu-mainmenu > li:after { content: " | "; padding: 0 15px; } #menu-mainmenu > li:last-child:after { content: ""; }

＆＃13;

<ul id="menu-mainmenu">
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
  <li>Link 4</li>
</ul>

＆＃13;

 npm install --global --production windows-build-tools

＆＃13;

Answer 3

使用您的CSS示例，您需要以下内容：

#menu-mainmenu li{
   display:inline-block;
}

运行此代码段：

＆＃13;

#menu-mainmenu li {
  display: inline-block;
}

#menu-mainmenu li + li:before {
    content: " | ";
    padding: 0 15px;
}

＆＃13;

<ul id="menu-mainmenu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

＆＃13;

https://jsfiddle.net/6936pon8/1/

Answer 4

所以，由于你无法共享代码，我不得不模拟错误，我的猜测是<li>有一个固定的width，所以在第一个例子中我们有可能错误，请验证您的情况是否属实。如果是，第二个例子会给你asnwer。

可疑错误

＆＃13;

#menu-mainmenu li {
  display: inline-block;
  width: 40px;
}

#menu-mainmenu li + li:before {
    content: " | ";
    padding: 0 15px;
}

＆＃13;

<ul id="menu-mainmenu">
    <li>hola</li>
    <li>...</li>
    <li>cómo</li>
    <li>está</li>    
</ul>

＆＃13;

修复

＆＃13;

#menu-mainmenu li {
  display: inline-block;
  width: 50px;
  position: relative;
}

#menu-mainmenu li + li:before {
    content: " | ";
    position: absolute;
    left: -10px;
}

＆＃13;

<ul id="menu-mainmenu">
    <li>hola</li>
    <li>.........</li>
    <li>cómo</li>
    <li>está</li>    
</ul>

＆＃13;

只要其父元素为absolute元素，您就可以使用relative个定位元素。

请再次提交尽可能多的代码，以便我们为您提供帮助，否则，如果没有人找到答案，那将是浪费时间。

Answer 5

#menu-mainmenu li:after {
    content: " | ";
    padding: 0 15px;
}

#menu-mainmenu li:last-child:after {
  content:"";
}

Answer 6

喂！看看这个：）

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing : border-box;
        list-style-type : none;
}

#menu-mainmenu li {
       display: inline-block;
       padding: 5px 10px;
}

#menu-mainmenu li:after {
      content : " | ";
      display: inline-block;
      width : 10px;
      height : 30px;
      padding-left : 5px;
      margin-left : 10px;
      background-color: yellow;
      font-size : 25px;
}

<ul id="menu-mainmenu">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>forth</li>    
</ul>

CSS在<li> -Tag之后添加分隔符

6 个答案:

可疑错误

修复