Question

假设我的div指定宽度为200px。然后我在该div中有3个h1元素，具有不同数量的字母/不同宽度。如何水平拉伸它们以填充div？

 <div id="Header">
     <div class="Logo"><h1>CORROBORREE</h1><br><h1>FROG</h1><br><h1>PROJECT</h1></div>

我需要的是宽度相同的单词---包含div的宽度。

我在h1上尝试了text-align justify，但这没有任何好处。

.Logo { 
margin-left: 100px; 
height:auto; 
width:  250px;  
background-color:#666; 
font-family: Impact, Charcoal, sans-serif; 
text-align: justify; 
}

.Logo h1 {    
font-size: 40;
text-align:justify;
display: inline;     
}

Answer 1

我不认为现在有一种纯粹的CSS方式（我的意思是使用一些直接的CSS方法，你需要处理周围的事情），你可以做的是使用{{1在CSS中并向每个人提供nth-of-type ..这样你就不必为每个letter-spacing声明类，而且你也会获得拉伸文本

Demo

h1

你为什么要这样做，我不知道，因为这看起来会非常奇怪

Answer 2

使用letter-spacing

例如：letter-spacing:20px

Answer 3

检查出来：

Demo

CSS：

#Header{
  width:200px;
  height:200px;
  background-color:grey;
  overflow:hidden;
}
#h1{
  -webkit-transform:scaleX(0.78);
  margin:0 0 0 -25px;
}
#h2{
-webkit-transform:scaleX(2.3);
  margin:0 0 0 70px;

}

#h3{
-webkit-transform:scaleX(1.3);
  margin:0 0 0 25px;

}

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="Header">
    <div class="Logo"><h1 id='h1'>CORROBORREE</h1><br><h1 id='h2'>FROG</h1><br><h1   id='h3'>PROJECT</h1></div></div>
</body>
</html>

Answer 4

text-align：justify和display：block。并且一页上只能有一个h1标签

如何设置文本以水平填充div？

4 个答案: