Question

嗨，大家好因为某些原因我似乎无法将我的边框与我的文字一起放在我的导航栏上：你可以在小提琴中看到Here

每当我尝试margin-top边界时，它都会向下移动一切。它自己的导航栏文本位于我的网页上的正确位置，我只想将实际的边框线向下移动以与文本的位置对齐

＆＃13;

body {
  font-family: 'Open Sans', sans-serif, Arial;
  font-size: 16px;
  color: #6D6D6D;
  background-color: black;
  font-weight: 300;
}

.navbar-default {
  background-color: transparent;
  border-top: 0px solid rgba(0, 0, 0, 0.5);
  border-bottom: 0px solid rgba(0, 0, 0, 0.5);
  border-left: 0px solid rgba(0, 0, 0, 0.5);
  border-right: 0px solid rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
  padding-top: 9px;
  padding-bottom: 20px;
}

.navbar.navbar-default .navbar-collapse {
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navbar-nav>li {
  border-right: 1px solid white;
  height: 20px;
  padding-left: 28px;
  padding-top: 25px;
}

.navbar-nav>li:last-child {
  border: none;
}

.navbar-default .navbar-toggle {
  border-color: rgba(0, 0, 0, 0);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-toggle {
  margin-top: 19px;
  margin-right: 43px;
}

.navbar-default .navbar-nav>li>a {
  color: white;
  font-size: 15px;
  line-height: 1px;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  background-color: #FFC600;
  text-decoration: none;
  color: #ffffff;
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

＆＃13;

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
					<span class="icon-bar"></span> <span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
      <a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

Answer 1

请更正下面的CSS类看起来更好，如果您对此修复有任何疑问，请与我们联系。

.navbar-nav>li {
    border-right: 1px solid white;
    padding-left: 14px;
    padding-right: 14px;
    height: 100%;
}

JSFiddle Demo

Answer 2

您忘记了['Gem11\n', 'Gem12\n']

删除填充物，只需将其保留原样即可。 fiddle

Answer 3

我注意到.navbar-nav>li上有一个填充导致了这个问题。

这是更新后的CSS：

body {
  font-family: 'Open Sans', sans-serif, Arial;
  font-size: 16px;
  color: #6D6D6D;
  background-color: black;
  font-weight: 300;
}



.navbar-default {
    background-color: transparent;
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    border-left: 0px solid rgba(0, 0, 0, 0.5);
    border-right: 0px solid rgba(0, 0, 0, 0.5);
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    padding-top: 9px;
    padding-bottom: 20px;
}

.navbar.navbar-default .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-nav>li {
      border-right: 1px solid white;
    height: 30px;
    text-align:center;
}

.navbar-nav>li:last-child{
   border: none;
}
.navbar-default .navbar-toggle {
    border-color: rgba(0, 0, 0, 0);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}


.navbar-toggle {
    margin-top: 19px;
    margin-right: 43px;
}

.navbar-default .navbar-nav>li>a {
  color: white;
  font-size: 15px;
  line-height: 1px;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
    background-color: #FFC600;
    text-decoration: none;
    color: #ffffff;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

一个有用的链接：https://jsfiddle.net/DTcHh/38351/

将边框与文本对齐

3 个答案: