如何在水平列表项之间放置图像

Question

我在这里遇到问题时遇到了麻烦。我有一个菜单，列表元素之间有一个栏。然而，不是标准边框，而是在顶部和底部有一个断裂。

我想出的唯一解决方案是在CSS中使用li:after来放置图像，但由于某种原因，填充和边距会全部搞砸。到目前为止，我已经在下面嵌入了CSS和HTML（我在这里使用Bootstrap作为框架）。

关于如何使这些酒吧工作的任何想法？

截图：

（忽略红色......插图中的东西搞砸了）。

＆＃13;

＆＃13;

      #reviews .review-actions {
        text-align: center;
        z-index: 2;
        padding-top: 1px;
      }
      #reviews nav {
        display:inline-block;
        margin:0 auto;
      }
      #reviews nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #reviews nav ul li{
        display: inline;
        margin: 0;
        float: left;
        padding: 10px;
        background-color: #fff;
        font-size:1.2em;
      }
      /*#reviews nav ul li:after{
        content: url('./img/menu-splitter.png');
      }*/
      #reviews nav ul > li:first-child {
        border-top-left-radius: .5em;
        border-bottom-left-radius: .5em;
        border: 1px solid #ccd0d0;
        border-right: none;
      }
      #reviews nav ul > li:nth-child(2){
        border: 1px solid #ccd0d0;
        border-right: none;
        border-left: none;
      }
      #reviews nav ul > li:last-child {
        border-top-right-radius: .5em;
        border-bottom-right-radius: .5em;
        border: 1px solid #ccd0d0;
        border-left: none;
      }
      #reviews nav ul li a{
    
      }

＆＃13;

    <section id='reviews'>
        <!-- Navigation -->
        <div class="review-actions">
          <nav>
            <ul>
              <li><a href='#'>The App</a></li>
              <li><a href='#'>Our Service</a></li>
              <li><a href='#'>Surprises</a></li>
            </ul>
          </nav>
        </div>
      </section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以直接在li

的背景中进行设置

#reviews .review-actions {
        text-align: center;
        z-index: 2;
        padding-top: 1px;
      }
      #reviews nav {
        display:inline-block;
        margin:0 auto;
      }
      #reviews nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #reviews nav ul li{
        display: inline;
        margin: 0;
        float: left;
        padding: 10px;
        background-color: #fff;
        font-size:1.2em;
      }
      /*#reviews nav ul li:after{
        content: url('./img/menu-splitter.png');
      }*/
      #reviews nav ul > li:first-child {
        border-top-left-radius: .5em;
        border-bottom-left-radius: .5em;
        border: 1px solid #ccd0d0;
        border-right: none;
      }
      #reviews nav ul > li:nth-child(2){
        border: 1px solid #ccd0d0;
        border-right: none;
        border-left: none;
      }
      #reviews nav ul > li:last-child {
        border-top-right-radius: .5em;
        border-bottom-right-radius: .5em;
        border: 1px solid #ccd0d0;
        border-left: none;
      }
      #reviews nav ul li a{
    
      }
      li:nth-last-child(n+2) {
           background-image: linear-gradient(blue, blue);
           background-size: 2px 90%;
           background-repeat: no-repeat;
           background-position: right center;
      }

<section id='reviews'>
        <!-- Navigation -->
        <div class="review-actions">
          <nav>
            <ul>
              <li><a href='#'>The App</a></li>
              <li><a href='#'>Our Service</a></li>
              <li><a href='#'>Surprises</a></li>
            </ul>
          </nav>
        </div>
      </section>

Answer 2

一种解决方案是在box-shadows周围部署4个单像素宽度<ul>作为虚假边框，然后为<ul>提供实际边框与<li> background-color：

相同的颜色

      #reviews .review-actions {
        text-align: center;
        z-index: 2;
        padding-top: 1px;
      }

      #reviews nav {
        display:inline-block;
        margin:0 auto;
      }

      #reviews nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 6px solid #ffffff;
        box-shadow: 1px 1px #ccd0d0, -1px 1px #ccd0d0, -1px -1px #ccd0d0, 1px -1px #ccd0d0;
        border-radius: .5em;
      }

      #reviews nav ul li{
        display: inline;
        margin: 0;
        float: left;
        padding: 10px;
        background-color: #fff;
        font-size:1.2em;
        border-left: 1px solid #ccd0d0;
      }

      #reviews nav ul > li:first-child {
        border-left: none;
      }

      <section id='reviews'>
        <!-- Navigation -->
        <div class="review-actions">
          <nav>
            <ul>
              <li><a href='#'>The App</a></li>
              <li><a href='#'>Our Service</a></li>
              <li><a href='#'>Surprises</a></li>
            </ul>
          </nav>
        </div>
      </section>