如何停止自動進入CSS？

我很喜歡html和css，因爲我剛開始。我試圖在創作中實現某些內容，但我不知道要刪除標題中的自動輸入內容。如何停止自動進入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

來源

2017-04-17 Lucas Verhoest

試試這個，......不知道這是你想要的東西

<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>

刪除標籤應該是在同一線之間的空間，而空間

來源

2017-04-17 17:03:51

感謝您的幫助，這工作。還有一個問題，但現在漢堡和學校之間有一點空間。你知道如何解決這個問題嗎？ –

我已編輯我的anwser檢查出來，如果它有助於給大拇指 –

工作！感謝您的幫助 –

.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>

來源

2017-04-17 17:03:41 Wex

謝謝你的幫助！ :) –

當然可以。繼續，如果你的內容「接受」答案 – Wex

<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>

你將他們之間沒有間隙現在:)

只寫跨度在同一直線上，不在不同行

讓我知道這是否工作

來源

2017-04-17 17:20:24

無論如何不工作 –

我檢查了它，它的工作原理！只需在同一行寫上所有的。 https://www.dropbox.com/s/txi35pf5jyez15m/Screen%20Shot%202017-04-17%20at%2019.36.43.png?dl=0 –

如何停止自動進入CSS？

回答

相關問題