如何更改“hello”中“h”的位置并使用css更改其寬度而不修改div元素,我嘗試了偽元素first-letter
,但它對我不起作用
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div>hello, this my code.</div>
uj5u.com熱心網友回復:
第一個字母作業正常。還有另一種方法可以將第一個放在 span 標簽中并對其進行樣式設定。
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
position: relative;
text-align: center;
}
div span {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div><span>h</span>ello, this my code.</div>
uj5u.com熱心網友回復:
使用 float 完成此任務:
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
float: left;
margin-left: 20px;
margin-right: -20px;
}
<div>hello, this my code.</div>
uj5u.com熱心網友回復:
嘿,不幸的是 CSS 不能自己選擇第一個字母。例如,您可以使用另一個 div;
<h1><span>H</span>ello</h1>
h1 { font-size: 1.3rem;}
h1 span {font-size:1.5rem;}
當然,您可以直接使用名稱,也可以通過不同方式訪問該 span 元素。但是不要忘記 span 本身并不會改變檔案放置等,這就是為什么我們更喜歡使用這個元素來執行類似的操作。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/514520.html
標籤:css
下一篇:如何在點擊時隱藏/顯示元素?