使用 flexbox，我使用填充和底部邊框線設定鏈接的樣式，但邊框線顯示在標題線之外，如何讓鏈接及其底部邊框線完全位于標題內？
容器不是應該自動調整以適應其內容嗎？
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1rem;
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-flow: column;
height: 100vh;
background-color: whitesmoke;
}
body>header,
body>footer {
flex: 0 0 auto;
background-color: white;
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
/* padding: 0.25rem; */
}
body>header .link {
color: blue;
border-bottom: 2px solid transparent;
outline: 0;
padding: 0.25rem;
text-decoration: none;
}
body>header .link:hover,
body>header .link:focus {
border-bottom: 2px solid blue;
}
body>header .link.title {
font-size: larger;
font-variant: small-caps;
}
body>main {
flex: 1 1 auto;
overflow: auto;
}<body>
<header>
<a href="#" class="link title">One</a>
<a href="#" class="link">Two</a>
<a href="#" class="link">Three</a>
<a href="#" class="link">Four</a>
<a href="#" class="link">Five</a>
</header>
<main></main>
<footer>Footer</footer>
</body>uj5u.com熱心網友回復：
由于您已經為 定義了填充body > header .link，邊框會消失。
您可以添加填充或定義高度<header>，問題將得到解決。
例如：（添加padding:0.5rem到<header>標簽）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1rem;
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-flow: column;
height: 100vh;
background-color: whitesmoke;
}
body > header {
padding:0.5rem
}
body > header,
body > footer {
flex: 0 0 auto;
background-color: white;
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
/* padding: 0.25rem; */
}
body > header .link {
color: blue;
border-bottom: 2px solid transparent;
outline: 0;
padding: 0.25rem;
text-decoration: none;
}
body > header .link:hover,
body > header .link:focus {
border-bottom: 2px solid blue;
}
body > header .link.title {
font-size: larger;
font-variant: small-caps;
}
body > main {
flex: 1 1 auto;
overflow: auto;
}
</style>
</head>
<body>
<header>
<a href="#" class="link">One</a>
<a href="#" class="link">Two</a>
<a href="#" class="link">Three</a>
<a href="#" class="link">Four</a>
<a href="#" class="link">Five</a>
</header>
<main></main>
<footer>Footer</footer>
</body>
</html>uj5u.com熱心網友回復：
嘗試在標題中添加填充底部。我剛剛在沙箱中嘗試過這個，它似乎對我有用。
header{
padding-bottom: 10px;
}uj5u.com熱心網友回復：
如果你想讓你的父元素適合它的孩子，那么試試吧 display:auto
uj5u.com熱心網友回復：
您應該嘗試將padding-left: 0.25rem而不是padding: 0.25rem在選擇器之下body>header .link。像下面這樣：
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1rem;
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-flow: column;
height: 100vh;
background-color: whitesmoke;
}
body>header,
body>footer {
flex: 0 0 auto;
background-color: white;
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
}
body>header .link {
color: blue;
border-bottom: 2px solid transparent;
outline: 0;
padding: 0.25rem 0.25rem 0 0.25rem;
text-decoration: none;
border
}
body>header .link:hover,
body>header .link:focus {
border-bottom: 2px solid blue;
}
body>header .link.title {
font-size: larger;
font-variant: small-caps;
}
body>main {
flex: 1 1 auto;
overflow: auto;
}
header {
min-height: 30px;
}<body>
<header>
<a href="#" class="link title">One</a>
<a href="#" class="link">Two</a>
<a href="#" class="link">Three</a>
<a href="#" class="link">Four</a>
<a href="#" class="link">Five</a>
</header>
<main></main>
<footer>Footer</footer>
</body>希望它能解決您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390328.html
上一篇：ERROR 1396 (HY000): Operation ALTER USER failed for 'root'@'localhost'