Question

我需要的是：
1.蓝线之间的线高为5px。
2.蓝色，黑色和棕色线之间的线高为20像素。
请查看我尝试的代码。我不知道怎么了。

<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
  overflow-y: auto;
  width: 100%;
  height:100%;
  line-height: 20px; 
}

.divclass span{
	line-height: 5px; 
}
</style>
</head>
<body>
<div class="divClass">
<span style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>

请提前帮助谢谢。

Answer 1

<!DOCTYPE html>
<html>
    <head>
       <style>
          .divClass{
              overflow-y: auto;
              width: 100%;
              height:100%;
              line-height: 20px; 
          }

          .span-blue{
               line-height: 5px !important; 
           }

           .span-other{
               line-height: 20px !important; 
            }
       </style>
   </head>
   <body>
       <div class="divClass">
          <span style="color:blue;" class="span-blue">first 
             abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz 
             abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
         <span class="span-other">second efgh</span><br>
         <span style="color:brown;" class="span-other">third 
            hijklmnopqrstuvwxyz</span>
      </div>
   </body>
</html>

Answer 2

您在这里： HTML：

<style>
.divClass{
  overflow-y: auto;
  width: 100%;
  height:100%;
  line-height: 20px; 
}

#blue{
    line-height: 5px; 
}
</style>
</head>
<body>
<div class="divClass">
<div id="blue" style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz <br>abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</div><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>

希望这是您所需要的。检查元素以检查其线高是否合适。

Answer 3

谢谢Yuri来指导我。您的回答帮助我解决了问题。尽管如此，我还是希望发布经过最少改动的已解析代码。请在下面找到更正的代码。谢谢大家

已完成更正：用div替换了span并用新值添加了margin-bottom而不是line-height。

<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
  overflow-y: auto;
  width: 100%;
  height:100%;
  line-height: 20px; 
}

.divclass div {
    margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="divClass">
<div style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</div><br>
<div>second efgh</div><br>
<div style="color:brown;">third hijklmnopqrstuvwxyz</div>
</div>
</body>
</html>

Answer 4

使用line-height: 5px将使您的文本重叠，所以我想您希望每行距离彼此相距5px。为此，您需要使line-height比font-size大5像素。 “蓝黑色和棕色之间的线高”称为margin（您也可以使用padding），为了起作用，必须将display: block设置为span标签

.divClass{
  width: 100%;
  height: auto;
  font-size: 15px;
}

span { display: block; }

.blue{
  color: blue;
	line-height: 20px; 
}

.brown { color: brown; }

.black, .brown, .blue {margin: 10px 0;}

<div class="divClass">
  <span class="blue">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span>
  <span class="black">second efgh</span>
  <span class="brown">third hijklmnopqrstuvwxyz</span>
</div>

Answer 5

您已将line-height: 5px;应用于.divclass span

您必须指定想要此特定CSS的跨度当该div中有多个跨度可用时。

为此，您可以使用span:first-child或将类添加到该特定范围。

我在这里使用过span:first-child。

span:first-child{
  line-height: 5px; 
}

span{
  overflow-y: auto;
  width: 100%;
  height:100%;
  line-height: 20px; 
}

<div class="divClass">
<span style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>

希望这会有所帮助：）

调整div中多行跨度的行高

5 个答案: