javascript - 求助大家，css中这种div应该怎么写？

Question

如图所示，上面的线height为1px，width为662px；下面4条线height为1px，width为7px，颜色都为#A7A7A7

Answer 1

在CSS中，你可以使用伪元素（:before 或 :after）或者多个 div 元素来创建这样的线。这里有一个简单的示例，使用单个 div 和伪元素来创建你描述的布局：

.lines-container {  position: relative;  width: 662px;  height: 10px; /* 或你想要的任何高度 */}.lines-container::before,.lines-container::after {  content: '';  display: block;  position: absolute;  height: 1px;  background-color: #A7A7A7;}.lines-container::before {  width: 662px;  top: 0;  left: 0;}.lines-container::after {  width: 7px;  height: 4px; /* 因为有四条小线，每条高度为1px，所以总高度为4px */  top: 5px; /* 将小线定位在大线下方 */  left: 50%;  margin-left: -4px; /* 居中小线，因为宽度为7px，所以左移宽度的一半 */  repeat: repeat-x; /* 这行代码实际上不需要，因为背景色默认会填充整个元素 */}

然后，在HTML中，你只需要一个 div 来包含这些线：

<div class="lines-container"></div>

上面的CSS代码创建了一个包含伪元素的 div。:before 伪元素用于创建大线，而 :after 伪元素用于创建四条小线。通过调整 top 和 left 属性，以及使用 margin-left 来负值偏移，可以精确定位这些小线。

请注意，这里的小线实际上是一个高度为4px的矩形，而不是四条分开的线。这是因为CSS中伪元素创建的是单个元素，而不是多个独立的线。如果你确实需要四个独立的线元素，那么你可能需要使用四个独立的 div 或其他元素，并使用CSS来分别样式化它们。

如果你的设计确实需要四个分开的线，你可能需要这样的HTML结构：

<div class="lines-container">  <div class="top-line"></div>  <div class="small-lines">    <div class="small-line"></div>    <div class="small-line"></div>    <div class="small-line"></div>    <div class="small-line"></div>  </div></div>

然后，使用如下CSS样式化：

.lines-container {  position: relative;  width: 662px;}.top-line,.small-line {  height: 1px;  background-color: #A7A7A7;}.top-line {  width: 100%; /* 继承父元素的宽度，即662px */}.small-lines {  position: absolute;  top: 2px; /* 根据需要调整位置 */  left: 50%;  transform: translateX(-50%); /* 水平居中 */}.small-line {  width: 7px;  display: inline-block;  margin: 0 2px; /* 如果有间隔需求的话 */}

在这个结构中，.top-line 是大线，而 .small-line 是四个小线。.small-lines 是一个容器，用于定位和居中这四个小线。通过 display: inline-block; 和 margin，可以管理小线之间的间隔（如果需要的话）。