主页 / 问题 / 1402503
Accepted
Andrew
Asked:2022-06-21 21:29:39 +0800 CST2022-06-21 21:29:39 +0800 CST

CSS - 线 * 横跨整个屏幕宽度

  • 772

我需要从 * 开始画一条线以适应屏幕的整个宽度

css frontend

3 个回答

  1. Best Answer

    使这样一行尽可能长（对于最大的屏幕来说足够），将它放在一个包装块中，并给这个块一个overflow: hidden. 然后在视觉上它似乎会适应（但实际上只有一部分是可见的）：

    .line-wrap {
  padding: 20px 0;
  overflow: hidden;
  white-space: nowrap;
}
    <div class="line-wrap">
************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
</div>

    • 1 

  2. .test {
  height: 7px;
  background-position: left;
  background-repeat: repeat;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAJFBMVEX///+KioowMDBAQEAMDAxiYmLm5ubMzMxQUFC2trYiIiIAAAA2IPbUAAAAAXRSTlMAQObYZgAAACVJREFUCB1jYAADLiDJNaOKgYEtpIGBgcO4mYGBk4kTKMjIwAAAMvcC1AqHZy8AAAAASUVORK5CYII=');
}
    <div class="test"></div>

    • 0 

  3. .line-wrap {
  padding: 4px;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAJFBMVEX///+KioowMDBAQEAMDAxiYmLm5ubMzMxQUFC2trYiIiIAAAA2IPbUAAAAAXRSTlMAQObYZgAAACVJREFUCB1jYAADLiDJNaOKgYEtpIGBgcO4mYGBk4kTKMjIwAAAMvcC1AqHZy8AAAAASUVORK5CYII=');

}
    <div class="line-wrap">
</div>

    • 0

相关问题