0

假设我有一个指定宽度为 200px 的 div。然后我在那个 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;     
}
4

4 回答 4

2

我认为目前还没有一种纯 CSS 方式来做到这一点（我的意思是使用一些直接的 CSS 方式，你需要左右兼顾），你可以做的是nth-of-type在 CSS 中使用并给予letter-spacing每个......这样你不必为每个声明类，h1而且你会得到拉伸的文本

演示

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

html, body {         /* Using this or not depends on you, 
                        nothing to do with the example */
    width: 100%;
    height: 100%;
}

.Logo {
    background: #f00;
    width: 300px;
}

.Logo h1:nth-of-type(1) {
    letter-spacing: 4px;
}

.Logo h1:nth-of-type(2) {
    letter-spacing: 70px;
}

.Logo h1:nth-of-type(3) {
    letter-spacing: 25px;
}

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

于 2013-05-31T08:35:25.597 回答
0

采用letter-spacing

例如：letter-spacing:20px

于 2013-05-31T08:49:19.873 回答
0

看一下这个：

演示

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>
于 2013-05-31T08:51:46.980 回答
-3

文本对齐：对齐和显示：块。并且一页上只能有一个 h1-tag

于 2013-05-31T08:30:47.313 回答