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

これをチェックしてください：

デモ

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

text-align:justify および display:block。また、h1 タグは 1 ページに 1 つしか存在できません。

于 2013-05-31T08:30:47.313 に答える