2017-04-17 12 views
1

私はちょうど始めたので、私はhtmlとcssでかなりnoobです。私は創造の中で何かを実装しようとしているが、私はタイトルに自動車が入るのを知らない。cssで自動入力を停止するにはどうすればよいですか?

@import url(https://fonts.googleapis.com/css?family=Fjalla+One); 
 

 

 
html{ 
 
    height: 100%; 
 
} 
 

 
body{ 
 
    font-family: 'Fjalla One', sans-serif; 
 
    background: linear-gradient(to bottom, #405166 0%, #656f6f 100%); 
 
} 
 

 
.container{ 
 
    margin: auto; 
 
} 
 

 

 
h1{ 
 
    text-transform: uppercase; 
 
    font-size: 42px; 
 
    line-height: 47px; 
 
    letter-spacing: 2px; 
 
    text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px; 
 
    text-align: center; 
 
} 
 

 

 
.title{ 
 
    transform: translateX(-50%) rotate(-5deg); 
 
    display: block; 
 
    margin-left:50%; 
 

 

 
}
<body> 
 
    <section class="container"> 
 
    <h1> 
 
    <br /> 
 
    <span class="title" style="color:#e55643;">Burger</span> 
 
    <span class="title" style="color:#2b9f5e;">school</span> 
 
    <span class="title" style="color:#f1c83c;">afspraken</span> 
 
    </h1> 
 
</section> 
 

 
</body>
私は色を削除せずにお互いの隣にバーガーや学校を持っているしたいと思います。

enter image description here

答えて

0

、これを試してみてください...これはあなたが

<body> 
    <section class="container"> 
    <h1> 
    <br /> 
    <span class="title" > 
     <label style="color:#e55643;">Burger</label> 
     <label style="color:#2b9f5e;">school</label> 
    </span> 
    <span class="title" style="color:#f1c83c;">afspraken</span> 
    </h1> 
</section> 

</body> 

//////を望んでいるかわかりません//ラベル間のスペースを削除するにはこれを行います。

<body> 
    <section class="container"> 
    <h1> 
    <br /> 
    <span class="title" > 
     <label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label> 
    </span> 
    <span class="title" style="color:#f1c83c;">afspraken</span> 
    </h1> 
</section> 

スペースなしで、それは同じ行にする必要がありますラベルの間にスペースを削除

+0

助けてくれてありがとう、これはうまくいった。ただもう1つの質問ですが、今はハンバーガーと学校の間に少しのスペースがあります。この問題を解決する方法を知っていますか? –

+0

私のアンカーを編集してそれをチェックして、親指アップを助けるのであれば –

+0

Worked!助けてくれてありがとう –

2

.title { display: block }要素は新しい行に分割する原因になっています。 display: inline-blockを使用すると、要素を同じ行に保ちながら要素をrotateにすることができます。

.title{ 
    transform: rotate(-5deg); 
    display: inline-block; 
} 

追加読書:https://css-tricks.com/almanac/properties/d/display/

@import url(https://fonts.googleapis.com/css?family=Fjalla+One); 
 

 

 
html{ 
 
    height: 100%; 
 
} 
 

 
body{ 
 
    font-family: 'Fjalla One', sans-serif; 
 
    background: linear-gradient(to bottom, #405166 0%, #656f6f 100%); 
 
} 
 

 
.container{ 
 
    margin: auto; 
 
} 
 

 

 
h1{ 
 
    text-transform: uppercase; 
 
    font-size: 42px; 
 
    line-height: 47px; 
 
    letter-spacing: 2px; 
 
    text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px; 
 
    text-align: center; 
 
} 
 

 

 
.title{ 
 
    transform: rotate(-5deg); 
 
    display: inline-block; 
 
}
<body> 
 
    <section class="container"> 
 
    <h1> 
 
    <br /> 
 
    <span class="title" style="color:#e55643;">Burger</span> 
 
    <span class="title" style="color:#2b9f5e;">school</span> 
 
    <span class="title" style="color:#f1c83c;">afspraken</span> 
 
    </h1> 
 
</section> 
 

 
</body>

+0

助けてくれてありがとう! :) –

+0

確かです。あなたが内容の場合は、先に進み、答えを「受け入れる」 – Wex

0
<h1> 
<br /> 
    <span class="title" style="color:#e55643;">Burger</span><span class="title" style="color:#2b9f5e;">school</span><span class="title" style="color:#f1c83c;">afspraken</span> 

あなたは今、それらの間に隙間を持っていないだろう:)

ちょうど同じ行にスパンを書きます、異なる行ではありません。

+0

とにかく感謝しない –

+0

私はそれをチェックし、それは動作します!同じ行にすべてと書いてください。 https://www.dropbox.com/s/txi35pf5jyez15m/Screen%20Shot%202017-04-17%20at%2019.36.43.png?dl=0 –

関連する問題