我嘗試在 HTML 中的水平線上方放置一些按鈕。我嘗試向左，向上（放在右上角，但 hr 阻止我的按鈕向上移動）。這是我的 HTML 代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.button{
display:inline-flex;
height: 25px;
padding: 0;
background-color: rgb(190, 190, 190);
border: none;
outline: none;
border-radius: 5px;
overflow: hidden;
font-family: 'Quicksand' , sans-serif;
font-size: 15px;
font-weight: 400;
cursor:pointer;
text-align:center;
position: relative;
left:600px; up:20px;
}
.button:hover {
background: rgb(134, 134, 134);
}
.button:active {
background: rgb(158, 157, 157);
}
.button__text,
.button__icon{
display: inline-flex;
align-items: center;
padding: 0 3px;
color: whitesmoke;
height: 100%;
}
</style>
</head>
<body style="background-color: white;">
<h1 style="font-family:Arial, Helvetica, sans-serif">Product list</h1>
<hr>
<button type="button" class="button">
<span class="button__icon">
<ion-icon name="add-circle-outline"></ion-icon>
</span>
<span class="button__text">ADD</span>
</button>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</body>
</html>有人可以向我解釋我該如何解決這個問題？
uj5u.com熱心網友回復：
因此，因為您inline為按鈕使用了display 屬性，所以button span在<hr>. 請參閱我所做的補充。此外，h1's 有一個與它們關聯的默認邊距（請參閱此處）。所以你將不得不穿上margin: 0;你的 h1 來擺脫一些不必要的間距。
h1 {
margin: 0;
}
.button{
display:inline-flex;
height: 25px;
padding: 0;
background-color: rgb(190, 190, 190);
border: none;
outline: none;
border-radius: 5px;
overflow: hidden;
font-family: 'Quicksand' , sans-serif;
font-size: 15px;
font-weight: 400;
cursor:pointer;
text-align:center;
position: relative;
left:600px;
top:20px;
}
.button:hover {
background: rgb(134, 134, 134);
}
.button:active {
background: rgb(158, 157, 157);
}
.button__text,
.button__icon{
display: inline-flex;
align-items: center;
padding: 0 3px;
color: whitesmoke;
height: 100%;
}<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</head>
<body style="background-color: white;">
<h1 style="font-family:Arial, Helvetica, sans-serif">Product list</h1>
<button type="button" class="button">
<span class="button__icon">
<ion-icon name="add-circle-outline"></ion-icon>
</span>
<span class="button__text">ADD</span>
</button>
<hr>
</body>
</html>點擊整頁
uj5u.com熱心網友回復：
如果你可以改變，你可以寫這樣的東西 html
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.button {
display: inline-flex;
height: 25px;
padding: 0;
background-color: rgb(190, 190, 190);
border: none;
outline: none;
border-radius: 5px;
overflow: hidden;
font-family: 'Quicksand', sans-serif;
font-size: 15px;
font-weight: 400;
cursor: pointer;
text-align: center;
position: relative;
right: 0;
top: 20px;
}
.button:hover {
background: rgb(134, 134, 134);
}
.button:active {
background: rgb(158, 157, 157);
}
.button__text,
.button__icon {
display: inline-flex;
align-items: center;
padding: 0 3px;
color: whitesmoke;
height: 100%;
}
.wrapper h1 {
order: 1;
}
.wrapper .button {
order: 2;
}
.wrapper hr {
width: 100%;
order: 3;
}<div class="wrapper">
<h1 style="font-family:Arial, Helvetica, sans-serif">Product list</h1>
<hr>
<button type="button" class="button">
<span class="button__icon">
<ion-icon name="add-circle-outline"></ion-icon>
</span>
<span class="button__text">ADD</span>
</button>
</div>uj5u.com熱心網友回復：
遵循您在第三張影像中繪制的內容
此代碼可以幫助您
你寫那個<hr>塊上去，但是不行，你寫錯了css( up)
- 在您使用的第一個影像中，
up但您需要寫top）
請注意“頂”不會帶你上，而是下
使用此練習來學習：https : //www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/change-an-elements-relative-position
.btn {
position: absolute;
top: 0;
right: 0;
}<div>random text</div>
<hr>
<button class="btn">button</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386915.html