html - 如何调整线条的线宽？

Question

如何调整 <hr class="content-divider"> 的宽度是，但我需要它来响应。我不希望这条线从每一侧的按钮结束的地方过去。

My site code.

这是行分隔符的 html。

<hr class="content-divider">

Answer 1

更新css部分

.content-divider {
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    position:relative; /*Add this*/
    left:0px; /*Add this*/
    right:0px; /*Add this*/
    margin: 20px auto; /*Add this you can change as your need*/
    max-width:70%; /*Add this*/
}

工作 fiddle - fiddle link

body {
  background-color: #1b1b1b;
}

#app {
  display: none;
}

#splash {
  margin: 200px auto;
}

#splash span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  -webkit-animation: 3s infinite linear;
  -moz-animation: 3s infinite linear;
  -o-animation: 3s infinite linear;
}

#splash span:nth-child(2) {
  background: white;
  -webkit-animation: kiri 1.2s infinite linear;
  -moz-animation: kiri 1.2s infinite linear;
  -o-animation: kiri 1.2s infinite linear;
}

#splash span:nth-child(3) {
  background: white;
  z-index: 100;
}

#splash span:nth-child(4) {
  background: white;
  -webkit-animation: kanan 1.2s infinite linear;
  -moz-animation: kanan 1.2s infinite linear;
  -o-animation: kanan 1.2s infinite linear;
}

@-webkit-keyframes kanan {
  0% {
    -webkit-transform: translateX(20px);
  }
  50% {
    -webkit-transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(20px);
    z-index: 200;
  }
}

@-moz-keyframes kanan {
  0% {
    -moz-transform: translateX(20px);
  }
  50% {
    -moz-transform: translateX(-20px);
  }
  100% {
    -moz-transform: translateX(20px);
    z-index: 200;
  }
}

@-o-keyframes kanan {
  0% {
    -o-transform: translateX(20px);
  }
  50% {
    -o-transform: translateX(-20px);
  }
  100% {
    -o-transform: translateX(20px);
    z-index: 200;
  }
}

@-webkit-keyframes kiri {
  0% {
    -webkit-transform: translateX(-20px);
    z-index: 200;
  }
  50% {
    -webkit-transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(-20px);
  }
}

@-moz-keyframes kiri {
  0% {
    -moz-transform: translateX(-20px);
    z-index: 200;
  }
  50% {
    -moz-transform: translateX(20px);
  }
  100% {
    -moz-transform: translateX(-20px);
  }
}

@-o-keyframes kiri {
  0% {
    -o-transform: translateX(-20px);
    z-index: 200;
  }
  50% {
    -o-transform: translateX(20px);
  }
  100% {
    -o-transform: translateX(-20px);
  }
}

.n2j-loading-video {
  width: 60px;
  height: 60px;
  margin: auto;
  border-color: white transparent white transparent;
  border-width: 5px;
  border-style: solid;
  animation: loading 1s ease infinite;
  position: fixed;
  border-radius: 50%;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body,
html {
  width: 100%;
  height: 100%;
}

.header1 {
  text-align: center;
  color: #f8f8f8;
}

.header-content>h1 {
  font-size: 5rem;
  font-family: sans-serif;
  font-weight: 700;
  margin: 0;
}

.header-content>h3 {
  font-size: 3rem;
  font-family: sans-serif;
  font-weight: 400;
  margin: 0;
}

.header-content {
  position: relative;
  padding-top: 20%;
  padding-bottom: 20%;
}

.content-divider {
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  position: relative;
  left: 0px;
  right: 0px;
  margin: 20px auto;
  max-width: 70%;
}

.btn.outline {
  background: none;
  padding: 12px 22px;
}

.btn-primary.outline {
  border: 2px solid #f8f8f8;
  color: #f8f8f8;
}

.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open>.dropdown-toggle.btn-primary {
  color: #f7ca18;
  border-color: #f7ca18;
}

.btn-primary.outline:active,
.btn-primary.outline.active {
  border-color: #f7ca18;
  color: #f7ca18;
  box-shadow: none;
}

ul.intro-social-buttons li {
  padding-bottom: 10px;
}

<script>
  setTimeout(function() {
    document.getElementById('app').style['display'] = 'block';
    document.getElementById('splash').style['display'] = 'none';
  }, 3000);
</script>

<!--The script above is placed in head within  my code-->

<body>
  <div id="splash">
    <div class='n2j-loading-video'></div>
  </div>
  <div id="app">
    <div class="header1">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="header-content">
              <h1 class="maintxt rotateInUpLeft animated">LIAM DOCHERTY</h1>
              <h3 class="subtxt rotateInUpLeft animated">WEB DEVELOPER &amp; GRAPHIC DESIGNER</h3>
              <hr class="content-divider">
              <ul class="list-inline intro-social-buttons">
                <li>
                  <a href="#" class="btn btn-primary btn-lg outline rotateInUpLeft animated"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Web Development Portfolio</span></a>
                </li>
                <li>
                  <a href="#" class="btn btn-primary btn-lg outline rotateInUpLeft animated"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">GFX Design Portfolio</span></a>
                </li>
                <li>
                  <a href="#" class="btn btn-primary btn-lg outline rotateInUpLeft animated"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">About Me</span></a>
                </li>
                <li>
                  <a href="#" class="btn btn-primary btn-lg outline rotateInUpLeft animated"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Contact Me</span></a>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- /.container -->
  </div>
  <!-- /.intro-header -->

  <script src="js/javascript.js"></script>
</body>

</html>