Question

我需要在页脚的宽度的90％处创建一个垂直的白色边框。

这应该是这样的：

我目前与图片中的相同，但右边没有白线。

footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
}

<footer>
  <h2>Contact us</h2>
  <p><em>You can find our physical location on:<br>
                42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
  </p>

  <a href=""><em>+44 (2345) 345 456</em></a>
  <br>
  <a href=""><em>info@growiteatit.co.uk</em></a>

  <ul>
    <li><a href=""><em>Check out our facebook page</em></a>
    </li>
    <li><a href=""><em>Check out our twitter feed</em></a>
    </li>
  </ul>
</footer>

Answer 1

给你的页脚position: relative并在其中添加一个div.verticalLine定义如下：

.verticalLine{
    position: absolute;
    top: 0;
    right: 10%;
    width: 30px;
    height: 100%;
    background: #fff;
}

Answer 2

＆＃13;

footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position: relative;             /* 1 */
}

footer::after {
  content: "";                    /* 2 */
  position: absolute;             
  width: 25px;
  height: 100%;
  background-color: white;
  top: 0;
  right: 10%;
}

＆＃13;

<footer>
  <h2>Contact us</h2>
  <p><em>You can find our physical location on:<br>
      42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
  </p>
  <a href=""><em>+44 (2345) 345 456</em></a>
  <br>
  <a href=""><em>info@growiteatit.co.uk</em></a>
  <ul>
    <li><a href=""><em>Check out our facebook page</em></a>
    </li>
    <li><a href=""><em>Check out our twitter feed</em></a>
    </li>
  </ul>
</footer>

＆＃13;

注意：

建立nearest positioned ancestor for absolute positioning。
使用绝对定位的伪元素来创建边框。

Answer 3

您可以使用CSS

添加伪元素

footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position:relative;
}
footer:after{
    content:'';
    position:absolute;
    right:10%;
    width:10px;
    top:0;
    bottom:0;
    background-color:#fff;
}

完整演示

＆＃13;

footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position:relative;
}
footer:after{
  content:'';
  position:absolute;
  right:10%;
  width:10px;
  top:0;
  bottom:0;
  background-color:#fff;
}

＆＃13;

<footer>
  <h2>Contact us</h2>
  <p><em>You can find our physical location on:<br>
                42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
  </p>

  <a href=""><em>+44 (2345) 345 456</em></a>
  <br>
  <a href=""><em>info@growiteatit.co.uk</em></a>

  <ul>
    <li><a href=""><em>Check out our facebook page</em></a>
    </li>
    <li><a href=""><em>Check out our twitter feed</em></a>
    </li>
  </ul>
</footer>

＆＃13;

Answer 4

使用:after伪元素可以非常轻松地实现这一点，因为伪元素不会要求您修改标记。给页脚position:relative，然后使用CSS在其中放置一个绝对定位的栏：

＆＃13;

footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position: relative;
}
footer:after {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  right: 50px;
  background: white;
  content: "";
}

＆＃13;

<footer>
  <h2>Contact us</h2>
  <p><em>You can find our physical location on:<br>
            42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
  </p>

  <a href=""><em>+44 (2345) 345 456</em></a>
  <br>
  <a href=""><em>info@growiteatit.co.uk</em></a>

  <ul>
    <li><a href=""><em>Check out our facebook page</em></a>
    </li>
    <li><a href=""><em>Check out our twitter feed</em></a>
    </li>
  </ul>
</footer>

＆＃13;

Answer 5

在页脚中添加一个div

＆＃13;

footer {
    width: 100%;
    background-color: #CDDE47;
 }

.a1 {
    width: 90%;
    border-right: 10px solid #fff;
    padding: 10px;
}

＆＃13;

<footer>
  <div class="a1">
        <h2>Contact us</h2>
        <p><em>You can find our physical location on:<br>
            42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em></p>

        <a href=""><em>+44 (2345) 345 456</em></a><br>
        <a href=""><em>info@growiteatit.co.uk</em></a>

        <ul>
            <li><a href=""><em>Check out our facebook page</em></a></li>
            <li><a href=""><em>Check out our twitter feed</em></a></li>
        </ul>
</div>
</footer>

＆＃13;

Answer 6

您可以添加内包装并应用边框＆amp;填充到那个。

＆＃13;

footer {
  width: 100%;
  background-color: #CDDE47;
}

.borderWrapper{
  border-right: solid 8px #fff;
  width: 90%;
    padding: 10px;
}

＆＃13;

<footer>
<div class="borderWrapper">
  <h2>Contact us</h2>
  <p><em>You can find our physical location on:<br>
                42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
  </p>

  <a href=""><em>+44 (2345) 345 456</em></a>
  <br>
  <a href=""><em>info@growiteatit.co.uk</em></a>

  <ul>
    <li><a href=""><em>Check out our facebook page</em></a>
    </li>
    <li><a href=""><em>Check out our twitter feed</em></a>
    </li>
  </ul>
  </div>
</footer>

＆＃13;

Answer 7

也许可以使用：after伪元素来创建白色分隔符，并确保页脚有位置：relatve包含绝对元素？ e.g。

footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position: relative;
}

footer::after {
 content: '';
 position: absolute;
 width: 30px;
 background: white;
 right: calc(10% - 15px);
 top: 0;
 height: 100%;
}

如何在页脚中显示垂直白色边框？

7 个答案: