Question

我刚刚在网站上建立了一些标题链接，但是，第二个链接之后有一条垂直的灰线（与标题和导航栏之间的分隔线相同）

我试图对链接进行重新排序，并尝试在引导程序上使用不同的列，但是只有col-6可以正确对齐我的链接，而col和col-4之类的其他链接都不会给我这个垂直线问题。

.header-area {
  position: relative;
  z-index: 10;
  width: 100%;
  -webkit-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
  background-color: #1c66de;
}

.header-area .top-header-area {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-area .top-header-area {
    z-index: 1;
  }
}

@media only screen and (max-width: 767px) {
  .header-area .top-header-area {
    z-index: 1;
  }
}

.header-area .top-header-area .top-header-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.header-area .top-header-area .top-header-content a {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 50px;
  display: inline-block;
}

<!-- Header Area Start -->
<header class="header-area">
  <!-- Top Header Area Start -->
  <div class="top-header-area">
    <div class="container">
      <div class="row">

        <div class="col-6">
          <div class="top-header-content">
            <a href="#"><i class="fa fa-signal" aria-hidden="true"></i> <span>Status</span></a>
            <a href="~"><i class="fa fa-question-circle" aria-hidden="true"></i> <span>Support</span></a>
            <a href="#"><i class="fa fa-money" aria-hidden="true"></i> <span>Billing</span></a>
          </div>
        </div>

        <div class="col-6">
          <div class="top-header-content">
            <a href="#"><i class="fa fa-lock" aria-hidden="true"></i> <span>Login / Register</span></a>

          </div>
        </div>
      </div>

    </div>
  </div>
  <!-- Top Header Area End -->

我希望“支持”链接后没有一行 http://prntscr.com/p8fzk9

Answer 1

为tect装饰添加了x类，如果您的意思是正确的，则链接下划线消失了。

                <!DOCTYPE html>
            <html>

                <head>
                    <title>Untitled</title>
                    <style>
                        body {
                            background-color:white;
                        }

                        .header-area .top-header-area {
                            position: relative;
                            z-index: 10;
                            width: 100%;
                            height: 50px;

                            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                        }


                        .x{
                                text-decoration: none !important;
                        }

                        @media only screen and (min-width: 768px) and (max-width: 991px) {
                            .header-area .top-header-area {
                                z-index: 1;
                            }


                            @media only screen and (max-width: 767px) {
                                .header-area .top-header-area {
                                    z-index: 1;

                                }



                                .header-area .top-header-area .top-header-content {
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex;
                                    -webkit-box-align: center;
                                    -ms-flex-align: center;
                                    align-items: center;
                                }

                                .header-area .top-header-area .top-header-content a {
                                    color: #ffffff;
                                    font-size: 14px;
                                    font-weight: 400;
                                    line-height: 50px;
                                    display: inline-block;
                                }
                    </style>
                </head>

                <body>
                    <!-- Header Area Start -->
                    <header class="header-area">
                        <!-- Top Header Area Start -->
                        <div class="top-header-area">
                            <div class="container">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="top-header-content">
                                            <a href="#"><i class="fa fa-signal" aria-hidden="true">
                                            </i> <span>Status</span></a>
                                             <a href="~"><i class="fa fa-question-circle" aria-hidden="true"></i>
                                             <span>Support</span></a>
                                             <a href="#"><i class="fa fa-money x" aria-hidden="true"></i></a>
                                             <span >Billing</span></a>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="top-header-content">
                                            <a href="#"><i class="fa fa-lock" aria-hidden="true"></i> <span>Login / Register</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Top Header Area End -->
                    </header>
                </body>

            </html>

需要删除标题中的垂直线。不知道那里怎么样

1 个答案: