flex中的垂直线
Vertical line in flex
我正在尝试弄清楚如何应用一条垂直线，该垂直线将一直延伸到侧边栏和主要内容这两个元素之间。这将是我做网站的最后一个问题，我希望有人能帮助我们解决我的问题。我在侧边栏中尝试了右边框，但它并没有一直向下延伸。
https://jsfiddle.net/chrismontage/43j1z0L8/5/
/*COLOR PALETTE*/
$color1: #B87D6F;
$color2: #EBE0DD;
$color3: #FFFFFF;
$color4: #737373;
$color5: #C4B0AC;
$color6: #545454;
$color7: #A6A6A6;
$color8: #F4F4F4;
$color9: #000000;
$color10: #ebe0dd;
/*FONTS*/
$font1: Neue Montreal;
$font2: Neue Einstellung;
$font3: Maharlika;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.line {
padding: 8px;
border-bottom: 1px solid #C4B0AC;
}
.sidebar ul {
list-style: none;
text-align: center;
}
.sidebar ul li a {
text-decoration: none;
color: #000000;
font-family: Neue Montreal;
font-weight: lighter;
font-size: 20px;
padding: 10px;
}
.first a {
background-color: #ebe0dd;
;
}
.sidebar a:hover {
color: #B87D6F;
}
.item1,
.item2 {
padding: 1.5%;
background-color: #F4F4F4;
}
.item1 {
margin-bottom: 2%;
}
.brand-and-desc h4 {
font-family: $font1;
font-weight: normal;
font-size: 15px;
color: #545454;
}
.status-and-price h4 {
font-family: Neue Montreal;
font-weight: normal;
font-size: 15px;
text-align: right;
color: #545454;
}
.contact h4 {
color: #FFFFFF;
background-color: #B87D6F;
font-family: Neue Montreal;
font-size: 13px;
width: 20%;
align-items: center;
}
.contact a {
text-decoration: none;
color: #FFFFFF;
background-color: #B87D6F;
padding: 1px 9px;
font-size: 15px;
font-family: Neue Montreal;
font-weight: normal;
}
.contact a:hover {
color: #A6A6A6;
}
.contact a:active {
color: #A6A6A6;
}
<!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>HIRAYA | Cart</title>
<link rel="stylesheet" href="/styles/sidebar.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="line">
</hr>
</div>
<div class="d-flex my-4 h-100">
<header class="sidebar">
<div class="d-flex flex-column d-none d-md-block">
<ul>
<li class="my-3 first"><a href="#">All</a></li>
<li class="my-3"><a href="#">To Pay</a></li>
<li class="my-3"><a href="#">To Ship</a></li>
<li class="my-3"><a href="#">To Receive</a></li>
<li class="my-3"><a href="#">Completed</a></li>
<li class="my-3"><a href="#">Cancelled</a></li>
</ul>
</div>
</header>
<div class="container items-content" style="width: 80%;">
<div class="row item1">
<div class="col-3 col-md-2 col-lg-1">
<img class="d-none d-md-block mx-3" src="/images/charrr.png" alt="" style="width: 50%;">
<img class="my-2" src="/images/charlottewhite.jpg" alt="" style="width: 100%;">
</div>
<div class="col-6 col-md-8 my-2 brand-and-desc">
<h4>Charlotte Folk</span>
</h4>
<h4>CFXXI Sweater</h4>
<h4>Large</h4>
<h4>x1</h4>
</div>
<div class="col-3 col-md-2 my-2 status-and-price">
<h4>To Pay</h4>
<h4>P990</h4>
</div>
<div class="col-lg-12 text-center contact"><a href="#">
Contact Seller</a>
</div>
</div>
<div class="row item2">
<div class="col-3 col-md-2 col-lg-1">
<img class="d-none d-md-block mx-3" src="/images/homelandlogo.png" alt="" style="width: 50%;">
<img class="my-2" src="/images/homelandproduct.png" alt="" style="width: 100%;">
</div>
<div class="col-6 col-md-8 my-2 brand-and-desc">
<h4>Homeland</span>
</h4>
<h4>Care Reminder™ Tee Oversized Boxy Tee - Wheat</h4>
<h4>Oversized Large</h4>
<h4>x1</h4>
</div>
<div class="col-3 col-md-2 my-2 status-and-price">
<h4>Completed</h4>
<h4>P649</h4>
</div>
<div class="col-lg-12 text-center contact"><a href="#">
Contact Seller</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
所以我在摆弄你的 jsfiddle，以下似乎有效。
在 HTML 中将 vh-100 添加到 <header> 以使其成为全高。
<header class = "sidebar vh-100">
然后在 CSS 中为 <header> 的边框添加一些快速代码，就像您之前尝试过的那样。
.sidebar{
border-right: 1px solid blue;
}
小心不要在标记中出现语义错误。我注意到您的 HTML.
中存在一些间距问题和随机结束 </span> 标签
话虽如此，您可以将 vh-100 class 添加到您的 .sidebar 以使其站立整个视口高度，然后添加 border-right 样式。然后，您可以使用 padding 将 border 与 ul 分开。
/*COLOR PALETTE*/
$color1: #B87D6F;
$color2: #EBE0DD;
$color3: #FFFFFF;
$color4: #737373;
$color5: #C4B0AC;
$color6: #545454;
$color7: #A6A6A6;
$color8: #F4F4F4;
$color9: #000000;
$color10: #ebe0dd;
/*FONTS*/
$font1: Neue Montreal;
$font2: Neue Einstellung;
$font3: Maharlika;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.line {
padding: 8px;
border-bottom: 1px solid #C4B0AC;
}
.sidebar {
border-right: solid 1px black;
padding-right: 1em;
}
.sidebar ul {
list-style: none;
text-align: center;
}
.sidebar ul li a {
text-decoration: none;
color: #000000;
font-family: Neue Montreal;
font-weight: lighter;
font-size: 20px;
padding: 10px;
}
.first a {
background-color: #ebe0dd;
;
}
.sidebar a:hover {
color: #B87D6F;
}
.item1,
.item2 {
padding: 1.5%;
background-color: #F4F4F4;
}
.item1 {
margin-bottom: 2%;
}
.brand-and-desc h4 {
font-family: $font1;
font-weight: normal;
font-size: 15px;
color: #545454;
}
.status-and-price h4 {
font-family: Neue Montreal;
font-weight: normal;
font-size: 15px;
text-align: right;
color: #545454;
}
.contact h4 {
color: #FFFFFF;
background-color: #B87D6F;
font-family: Neue Montreal;
font-size: 13px;
width: 20%;
align-items: center;
}
.contact a {
text-decoration: none;
color: #FFFFFF;
background-color: #B87D6F;
padding: 1px 9px;
font-size: 15px;
font-family: Neue Montreal;
font-weight: normal;
}
.contact a:hover {
color: #A6A6A6;
}
.contact a:active {
color: #A6A6A6;
}
<!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>HIRAYA | Cart</title>
<link rel="stylesheet" href="/styles/sidebar.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="line"></div>
<div class="d-flex my-4 h-100">
<header class="sidebar-wrapper">
<div class="d-flex flex-column d-none d-md-block vh-100 sidebar">
<ul>
<li class="my-3 first"><a href="#">All</a></li>
<li class="my-3"><a href="#">To Pay</a></li>
<li class="my-3"><a href="#">To Ship</a></li>
<li class="my-3"><a href="#">To Receive</a></li>
<li class="my-3"><a href="#">Completed</a></li>
<li class="my-3"><a href="#">Cancelled</a></li>
</ul>
</div>
</header>
<div class="container items-content" style="width: 80%;">
<div class="row item1">
<div class="col-3 col-md-2 col-lg-1">
<img class="d-none d-md-block mx-3" src="/images/charrr.png" alt="" style="width: 50%;">
<img class="my-2" src="/images/charlottewhite.jpg" alt="" style="width: 100%;">
</div>
<div class="col-6 col-md-8 my-2 brand-and-desc">
<h4>Charlotte Folk</h4>
<h4>CFXXI Sweater</h4>
<h4>Large</h4>
<h4>x1</h4>
</div>
<div class="col-3 col-md-2 my-2 status-and-price">
<h4>To Pay</h4>
<h4>P990</h4>
</div>
<div class="col-lg-12 text-center contact"><a href="#">
Contact Seller</a>
</div>
</div>
<div class="row item2">
<div class="col-3 col-md-2 col-lg-1">
<img class="d-none d-md-block mx-3" src="/images/homelandlogo.png" alt="" style="width: 50%;">
<img class="my-2" src="/images/homelandproduct.png" alt="" style="width: 100%;">
</div>
<div class="col-6 col-md-8 my-2 brand-and-desc">
<h4>Homeland</h4>
<h4>Care Reminder™ Tee Oversized Boxy Tee - Wheat</h4>
<h4>Oversized Large</h4>
<h4>x1</h4>
</div>
<div class="col-3 col-md-2 my-2 status-and-price">
<h4>Completed</h4>
<h4>P649</h4>
</div>
<div class="col-lg-12 text-center contact"><a href="#">
Contact Seller</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
我正在尝试弄清楚如何应用一条垂直线，该垂直线将一直延伸到侧边栏和主要内容这两个元素之间。这将是我做网站的最后一个问题，我希望有人能帮助我们解决我的问题。我在侧边栏中尝试了右边框，但它并没有一直向下延伸。
https://jsfiddle.net/chrismontage/43j1z0L8/5/
/*COLOR PALETTE*/
$color1: #B87D6F;
$color2: #EBE0DD;
$color3: #FFFFFF;
$color4: #737373;
$color5: #C4B0AC;
$color6: #545454;
$color7: #A6A6A6;
$color8: #F4F4F4;
$color9: #000000;
$color10: #ebe0dd;
/*FONTS*/
$font1: Neue Montreal;
$font2: Neue Einstellung;
$font3: Maharlika;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.line {
padding: 8px;
border-bottom: 1px solid #C4B0AC;
}
.sidebar ul {
list-style: none;
text-align: center;
}
.sidebar ul li a {
text-decoration: none;
color: #000000;
font-family: Neue Montreal;
font-weight: lighter;
font-size: 20px;
padding: 10px;
}
.first a {
background-color: #ebe0dd;
;
}
.sidebar a:hover {
color: #B87D6F;
}
.item1,
.item2 {
padding: 1.5%;
background-color: #F4F4F4;
}
.item1 {
margin-bottom: 2%;
}
.brand-and-desc h4 {
font-family: $font1;
font-weight: normal;
font-size: 15px;
color: #545454;
}
.status-and-price h4 {
font-family: Neue Montreal;
font-weight: normal;
font-size: 15px;
text-align: right;
color: #545454;
}
.contact h4 {
color: #FFFFFF;
background-color: #B87D6F;
font-family: Neue Montreal;
font-size: 13px;
width: 20%;
align-items: center;
}
.contact a {
text-decoration: none;
color: #FFFFFF;
background-color: #B87D6F;
padding: 1px 9px;
font-size: 15px;
font-family: Neue Montreal;
font-weight: normal;
}
.contact a:hover {
color: #A6A6A6;
}
.contact a:active {
color: #A6A6A6;
}
<!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>HIRAYA | Cart</title>
<link rel="stylesheet" href="/styles/sidebar.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="line">
</hr>
</div>
<div class="d-flex my-4 h-100">
<header class="sidebar">
<div class="d-flex flex-column d-none d-md-block">
<ul>
<li class="my-3 first"><a href="#">All</a></li>
<li class="my-3"><a href="#">To Pay</a></li>
<li class="my-3"><a href="#">To Ship</a></li>
<li class="my-3"><a href="#">To Receive</a></li>
<li class="my-3"><a href="#">Completed</a></li>
<li class="my-3"><a href="#">Cancelled</a></li>
</ul>
</div>
</header>
<div class="container items-content" style="width: 80%;">
<div class="row item1">
<div class="col-3 col-md-2 col-lg-1">
<img class="d-none d-md-block mx-3" src="/images/charrr.png" alt="" style="width: 50%;">
<img class="my-2" src="/images/charlottewhite.jpg" alt="" style="width: 100%;">
</div>
<div class="col-6 col-md-8 my-2 brand-and-desc">
<h4>Charlotte Folk</span>
</h4>
<h4>CFXXI Sweater</h4>
<h4>Large</h4>
<h4>x1</h4>
</div>
<div class="col-3 col-md-2 my-2 status-and-price">
<h4>To Pay</h4>
<h4>P990</h4>
</div>
<div class="col-lg-12 text-center contact"><a href="#">
Contact Seller</a>
</div>
</div>
<div class="row item2">
<div class="col-3 col-md-2 col-lg-1">
<img class="d-none d-md-block mx-3" src="/images/homelandlogo.png" alt="" style="width: 50%;">
<img class="my-2" src="/images/homelandproduct.png" alt="" style="width: 100%;">
</div>
<div class="col-6 col-md-8 my-2 brand-and-desc">
<h4>Homeland</span>
</h4>
<h4>Care Reminder™ Tee Oversized Boxy Tee - Wheat</h4>
<h4>Oversized Large</h4>
<h4>x1</h4>
</div>
<div class="col-3 col-md-2 my-2 status-and-price">
<h4>Completed</h4>
<h4>P649</h4>
</div>
<div class="col-lg-12 text-center contact"><a href="#">
Contact Seller</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
所以我在摆弄你的 jsfiddle，以下似乎有效。
在 HTML 中将 vh-100 添加到 <header> 以使其成为全高。
<header class = "sidebar vh-100">
然后在 CSS 中为 <header> 的边框添加一些快速代码，就像您之前尝试过的那样。
.sidebar{
border-right: 1px solid blue;
}
小心不要在标记中出现语义错误。我注意到您的 HTML.
中存在一些间距问题和随机结束</span> 标签
话虽如此，您可以将 vh-100 class 添加到您的 .sidebar 以使其站立整个视口高度，然后添加 border-right 样式。然后，您可以使用 padding 将 border 与 ul 分开。
/*COLOR PALETTE*/
$color1: #B87D6F;
$color2: #EBE0DD;
$color3: #FFFFFF;
$color4: #737373;
$color5: #C4B0AC;
$color6: #545454;
$color7: #A6A6A6;
$color8: #F4F4F4;
$color9: #000000;
$color10: #ebe0dd;
/*FONTS*/
$font1: Neue Montreal;
$font2: Neue Einstellung;
$font3: Maharlika;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.line {
padding: 8px;
border-bottom: 1px solid #C4B0AC;
}
.sidebar {
border-right: solid 1px black;
padding-right: 1em;
}
.sidebar ul {
list-style: none;
text-align: center;
}
.sidebar ul li a {
text-decoration: none;
color: #000000;
font-family: Neue Montreal;
font-weight: lighter;
font-size: 20px;
padding: 10px;
}
.first a {
background-color: #ebe0dd;
;
}
.sidebar a:hover {
color: #B87D6F;
}
.item1,
.item2 {
padding: 1.5%;
background-color: #F4F4F4;
}
.item1 {
margin-bottom: 2%;
}
.brand-and-desc h4 {
font-family: $font1;
font-weight: normal;
font-size: 15px;
color: #545454;
}
.status-and-price h4 {
font-family: Neue Montreal;
font-weight: normal;
font-size: 15px;
text-align: right;
color: #545454;
}
.contact h4 {
color: #FFFFFF;
background-color: #B87D6F;
font-family: Neue Montreal;
font-size: 13px;
width: 20%;
align-items: center;
}
.contact a {
text-decoration: none;
color: #FFFFFF;
background-color: #B87D6F;
padding: 1px 9px;
font-size: 15px;
font-family: Neue Montreal;
font-weight: normal;
}
.contact a:hover {
color: #A6A6A6;
}
.contact a:active {
color: #A6A6A6;
}
<!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>HIRAYA | Cart</title>
<link rel="stylesheet" href="/styles/sidebar.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="line"></div>
<div class="d-flex my-4 h-100">
<header class="sidebar-wrapper">
<div class="d-flex flex-column d-none d-md-block vh-100 sidebar">
<ul>
<li class="my-3 first"><a href="#">All</a></li>
<li class="my-3"><a href="#">To Pay</a></li>
<li class="my-3"><a href="#">To Ship</a></li>
<li class="my-3"><a href="#">To Receive</a></li>
<li class="my-3"><a href="#">Completed</a></li>
<li class="my-3"><a href="#">Cancelled</a></li>
</ul>
</div>
</header>
<div class="container items-content" style="width: 80%;">
<div class="row item1">
<div class="col-3 col-md-2 col-lg-1">
<img class="d-none d-md-block mx-3" src="/images/charrr.png" alt="" style="width: 50%;">
<img class="my-2" src="/images/charlottewhite.jpg" alt="" style="width: 100%;">
</div>
<div class="col-6 col-md-8 my-2 brand-and-desc">
<h4>Charlotte Folk</h4>
<h4>CFXXI Sweater</h4>
<h4>Large</h4>
<h4>x1</h4>
</div>
<div class="col-3 col-md-2 my-2 status-and-price">
<h4>To Pay</h4>
<h4>P990</h4>
</div>
<div class="col-lg-12 text-center contact"><a href="#">
Contact Seller</a>
</div>
</div>
<div class="row item2">
<div class="col-3 col-md-2 col-lg-1">
<img class="d-none d-md-block mx-3" src="/images/homelandlogo.png" alt="" style="width: 50%;">
<img class="my-2" src="/images/homelandproduct.png" alt="" style="width: 100%;">
</div>
<div class="col-6 col-md-8 my-2 brand-and-desc">
<h4>Homeland</h4>
<h4>Care Reminder™ Tee Oversized Boxy Tee - Wheat</h4>
<h4>Oversized Large</h4>
<h4>x1</h4>
</div>
<div class="col-3 col-md-2 my-2 status-and-price">
<h4>Completed</h4>
<h4>P649</h4>
</div>
<div class="col-lg-12 text-center contact"><a href="#">
Contact Seller</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>