Question

我想在每张图像之间放置一条垂直线，我尝试了几项但没有成功。

这里是最终结果的一个想法。两个图像之间有一条垂直的灰线。如何创建垂直线？

.background-contact{
  background-color: white;
  width: 100%;
  height: 190px;
  position: absolute;

}

.logo5{
  padding-top: -70px;
  padding-left: 38px;
}

.title-contact-1{
  font-family: 'Questrial', sans-serif;
  font-size: 22px;
  margin-top: -32px;
  padding-left: 20px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
}

.text-contact-1{
  font-family: 'Questrial', sans-serif;
  font-size: 14px;
  top: 22%;
  left: -12%;
  position: relative;
  transform: translateX(-50%);
}

.logo6{
  padding-top: 35px;
  left: -80%;
}

<div class="background-contact">
  <img class="logo5" src="https://i.ibb.co/0YyTszS/title-icon1.png" >
  <span class="title-contact-1">Telephone</span>
  <span class="text-contact-1">Just For VIP Member</span>
  <img class="logo6" src="https://i.ibb.co/026Fs1B/title-icon2.png" >
  <span class="title-contact-1">E-mail Us</span>
  <span class="text-contact-1">admin@superbtc.biz</span>
</div>

Answer 1

我没有做到完美的像素，但是像这样：

.background-contact{
  background-color: white;
  width: 100%;
  position: absolute;
  display: flex;

}

.background-contact__block {
  padding-bottom: 20px;
}

.background-contact__block + .background-contact__block {
  margin-left: 50px;
  padding-left: 20px;
  border-left: 1px solid #ccc;
}


.title-contact-1{
  font-family: 'Questrial', sans-serif;
  font-size: 22px;
  vertical-align: middle;
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block;
}

.text-contact-1{
  font-family: 'Questrial', sans-serif;
  font-size: 14px;
  display: block;
}

.logo{
  display: inline-block;
  vertical-align: middle;
}

.background-contact__name {
  padding-bottom: 30px;
}

<div class="background-contact">
  <div class="background-contact__block">
    <div class="background-contact__name">
      <img class="logo" src="https://i.ibb.co/0YyTszS/title-icon1.png" >
      <span class="title-contact-1">Telephone</span>
    </div>
    <span class="text-contact-1">Just For VIP Member</span>
  </div>
  <div class="background-contact__block">
    <div class="background-contact__name">
      <img class="logo" src="https://i.ibb.co/026Fs1B/title-icon2.png" >
      <span class="title-contact-1">E-mail Us</span>
    </div>
    <span class="text-contact-1">admin@superbtc.biz</span>
  </div>
</div>

Answer 2

要创建边框，可以使用

border: (width) (style) (color);

这将在元素周围形成边框，以选择可以使用的一侧

border-left:
border-right:
border-top:
border-bottom:

但是这里的CSS很奇怪，我建议您使用尽可能少的绝对定位。

这里有一种更好的方法：

.contact-item {
  width: 200px;
  display: inline-block;
}

.contact-item img,
.contact-item h1 {
  display: inline-block;
}

.border-left {
  border-left: 2px solid #ddd;
  padding-left: 1rem;
}

<div id="background-contact">
  <div class="contact-item">
    <img src="https://i.ibb.co/0YyTszS/title-icon1.png">
    <h1>Telephone</h1>
    <p>text<p>
  </div>
  
  <div class="contact-item border-left">
    <img src="https://i.ibb.co/026Fs1B/title-icon2.png">
    <h1>Email Us</h1>
    <p>text</p>
  </div>
</div>

您还可以使用：

element::last-child {
    border-left: .. .. ..;
}

如何在每个图像之间放置一条垂直线？

2 个答案: