<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Renowned buttons </title>
</head>
<body>
<button class="Uber"> Request now </button>
<button class="Amazon"> Add to Cart </button>
<button class="GitHub"> Sign up </button>
<button class="Bootstrap_One"> Get started </button>
<button class="Bootstrap_Two"> Download </button>
<button class="LinkedIn_One"> Apply on company website </button>
<button class="LinkedIn_Two"> Save </button>
</body>
</html>
<style>
.Uber {
background-color: black;
color: white;
border: none;
height: 35px;
width: 110px;
font-size: 12px;
cursor: pointer;
}
.Amazon {
background-color: rgb(255, 216, 20);
color: black;
border: none;
height: 35px;
width: 160px;
border-radius: 35px;
font-size: 13px;
cursor: pointer;
margin-left: 5px;
}
.GitHub {
background-color: rgb(46, 164, 79);
color: white;
border: none;
height: 35px;
width: 90px;
border-radius: 5px;
font-size: 15px;
position: relative;
cursor: pointer;
}
</style>
我只需要向上移動GitHub按鈕中的文本而不移動其他按鈕，所以......
- 填充不起作用，因為它會移動按鈕本身，將文本留在同一位置（這不是我的目標）
- 位置頂部，底部與填充相同，但使用按鈕移動文本
所以我需要這兩個引數之間的東西（只移動文本而不是按鈕）
uj5u.com熱心網友回復：
您可以嘗試以下操作：將按鈕內的文本放入<span>標簽中，然后您可以簡單地使用position: relative;and對其進行樣式設定bottom: 10px;。
像那樣：
<!-- replace current line with this one: -->
<button class="GitHub"> <span class="GitHubText"> Sign up </span> </button>
<!-- add this to your <style> tag: -->
.GitHubText {
position: relative;
bottom: 5px;
}
那是你想要的嗎？
片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Renowned buttons </title>
</head>
<body>
<button class="Uber"> Request now </button>
<button class="Amazon"> Add to Cart </button>
<button class="GitHub"> <span class="GitHubText"> Sign up </span> </button> <!-- line i modified -->
<button class="Bootstrap_One"> Get started </button>
<button class="Bootstrap_Two"> Download </button>
<button class="LinkedIn_One"> Apply on company website </button>
<button class="LinkedIn_Two"> Save </button>
</body>
</html>
<style>
.Uber {
background-color: black;
color: white;
border: none;
height: 35px;
width: 110px;
font-size: 12px;
cursor: pointer;
}
.Amazon {
background-color: rgb(255, 216, 20);
color: black;
border: none;
height: 35px;
width: 160px;
border-radius: 35px;
font-size: 13px;
cursor: pointer;
margin-left: 5px;
}
.GitHub {
background-color: rgb(46, 164, 79);
color: white;
border: none;
height: 35px;
width: 90px;
border-radius: 5px;
font-size: 15px;
position: relative;
cursor: pointer;
}
/* new lines */
.GitHubText {
position: relative;
bottom: 5px;
}
</style>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/487475.html
下一篇：Kotlin按鈕監聽器