Question

我想在此徽标文字的左右两侧放置垂直线，但两条线都需要触摸底部边框，这就是我现在所拥有的：这是一个编码：

.header-container {
  /*padding: 8px;*/
  border-bottom: 2px solid lightgrey;
  margin-top: 20px;
}
.logo {
  font-size: 12px;
  font-weight: bold;
  position: relative;
  bottom: -10px;
}
.col-md-1 {
  border-left: 1px solid grey;
}
h4 {
  font-weight: bold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="header-container col-md-8 col-md-offset-2">
      <div class="col-md-1 logo">Logo here</div>
      <div class="col-md-11">
        <h4>lorem ipsum lorem lorem</h4>
      </div>
    </div>
  </div>
</div>

Answer 1

在.logo上使用伪元素。像这样：

.logo:before {
  content: '';
  position: absolute;
  left: 0; /* adjust as you need */
  top: 0;
  width: 1px;
  height: 30px;
  background-color:grey;
}

.logo:after {
  content: '';
  position: absolute;
  right: 0; /* adjust as you need */
  top: 0;
  width: 1px;
  height: 30px;
  background-color:grey;
}

Demo

更新：感谢besciualex的评论

Answer 2

您可以使用 CSS Flexbox 。使您的.header-container成为灵活容器。请看下面的代码段：

.header-container {
    /*padding: 8px;*/
    border-bottom: 2px solid lightgrey;
    margin-top: 20px;
  display: flex;
  align-items: center;
}

.logo {
    padding: 0 10px;
    margin-right: 10px;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    border-right: 1px solid;
    border-left: 1px solid;
    align-self: stretch;
    display: flex;
    align-items: center;
}

h4 {
    font-weight: bold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="header-container col-md-8 col-md-offset-2">
            <div class="item logo">Logo</div>
            <div class="item">
                <h4>
                    lorem ipsum lorem lorem
                </h4>
            </div>
        </div>
    </div>
</div>

希望这有帮助！

Answer 3

在我看来，你需要的是使用伪选择器:: before和:: after。请尝试以下方法：

.logo::before {
   content: '';
   display:inline-block;
   width: 1px;
   height: [put the desired height here];
   margin: [adjust margins];
}
.logo::after{
   content: '';
   display:inline-block;
   width: 1px;
   height: [put the desired height here];
   margin: [adjust margins];
}

让我知道这是否有效。

Answer 4

Updated copen

您可以使用line-height：

.logo {
    font-size: 12px;
    font-weight: bold;
    position: relative;
    bottom: -10px;
    line-height: 30px;
}

.col-md-1 {
  border-left: 1px solid grey;
  border-right: 1px solid grey;
}

如何在徽标的左右两侧放置垂直线条

4 个答案: