我正在为学校做一个项目，我们将设计一种聊天应用程序，我决定我真的很想制作类似 discord 显示的东西，因为它非常常用(Skype、Slack 等都以某种方式看起来很相似，形状或形式，因此我继续制作一个看起来像这样的线框， https://ibb.co/KGmM7ZJ 这是我目前得到的，https://ibb.co/YN7wftG 我知道这个问题问的是不同的事情，但我也想知道如何让黑线完全走，例如 100% 高度和/或 100% 宽度取决于它是垂直还是水平。谢谢。
法典：
<!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">
<link rel="stylesheet" href="css/main.css">
<title>Dsqord</title>
</head>
<body>
<!-- Logo -->
<header>
<div class="msg-target">
<img src="img/avatar.png">
<h1>Mohammed</h1>
<span class="target-status">Cool status!</span>
<p style="font-weight: bold;">@mohammed32</p>
</div>
<div>
<img class="logo" src="img/logo.png">
<br>
<input type="search" placeholder="Search for conversations">
</div>
</header>
<!-- Recent conversations -->
<div class="recent-conversations">
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
</div>
<!-- -->
</body>
</html>
body {
margin: 0%;
padding: 0%;
}
/* Global */
/* Header
logo-search {
display: flex;
flex-direction: row;
} */
/* Logo */
.logo {
margin-left: 1%;
width: 6.5%;
}
/* Input search*/
header input[type=search] {
width: 15%;
margin-left: 1%;
padding: 1%;
border: none;
}
/* Message target */
.msg-target {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Profile picture */
.msg-target img {
width: 20%;
}
/* Recent Conversations */
.recent-conversations {
display: flex;
flex-direction: column;
margin-left: 1%;
}
/* Flexbox item */
.conversation {
display: inline-flex;
}
/* Profile Picture */
.conversation img {
width: 5%;
}
/* Display name */
.conversation h3 {
}
/* Recent message */
.conversation p {
}
我稍微改变了html结构。添加了伪类:before和:after，具有用于显示线条的绝对定位。此外，通过可变--widthLeft200px，我为img和侧面部分制作了一个宽度.recent-conversations。
但是，我建议使用模板的设计网格。
:root {
--widthLeft200px: 200px;
}
body {
margin: 0%;
padding: 0%;
}
/* Global */
/* Header
logo-search {
display: flex;
flex-direction: row;
} */
/* Logo */
header {
border-bottom: 1px solid;
}
.logo {
margin-left: 1%;
width: 6.5%;
}
/* Input search*/
header input[type=search] {
width: 15%;
margin-left: 1%;
padding: 1%;
border: none;
width: var(--widthLeft200px);
}
/* Message target */
.msg-target {
display: inline-flex;
/*flex-direction: column;*/
align-items: center;
/*justify-content: center;*/
gap: 10px;
}
.msg-target > div {
text-align: center;
position: relative;
}
.msg-target > div > h1 {
text-align: center;
position: relative;
margin-left: 10px;
}
.msg-target > div:before {
content: '';
position: absolute;
background-color: black;
width: 1px;
top: -100%;
left: 0;
bottom: -100%;
transform: translateY(0);
}
.msg-target > div:after {
content: '';
position: absolute;
background-color: black;
width: 1px;
top: -100%;
left: 0;
bottom: -100%;
transform: translateY(100%);
}
.msg-target > hr {
width: 1px;
height: 50px;
border: none;
margin: 0;
background-color: black;
}
/* Profile picture */
.msg-target img {
width: var(--widthLeft200px);
}
/* Recent Conversations */
.recent-conversations {
display: flex;
flex-direction: column;
margin-left: 1%;
width: var(--widthLeft200px);
}
/* Flexbox item */
.conversation {
display: inline-flex;
}
/* Profile Picture */
.conversation img {
width: 5%;
}
/* Display name */
.conversation h3 {
}
/* Recent message */
.conversation p {
}<!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">
<link rel="stylesheet" href="css/main.css">
<title>Dsqord</title>
</head>
<body>
<!-- Logo -->
<header>
<div class="msg-target">
<img src="https://i.pinimg.com/originals/9d/4d/31/9d4d314ec7722d05541111a180e4e54b.png">
<div>
<h1>Mohammed</h1>
<p style="font-weight: bold;">@mohammed32</p>
</div>
<hr>
<span class="target-status">Cool status!</span>
</div>
<div>
<img class="logo" src="img/logo.png">
<br>
<input type="search" placeholder="Search for conversations">
</div>
</header>
<!-- Recent conversations -->
<div class="recent-conversations">
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
</div>
<!-- -->
</body>
</html>body {
margin: 0%;
padding: 0%;
}
/* Global */
/* Header
logo-search {
display: flex;
flex-direction: row;
} */
/* Logo */
.logo {
margin-left: 1%;
width: 6.5%;
}
/* Input search*/
header input[type=search] {
width: 15%;
margin-left: 1%;
padding: 1%;
border: none;
}
/* Message target */
.msg-target {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Profile picture */
.msg-target img {
width: 20%;
}
/* Recent Conversations */
.recent-conversations {
display: flex;
flex-direction: column;
margin-left: 1%;
height:100vh;
}
/* Flexbox item */
.conversation {
display: inline-flex;
}
/* Profile Picture */
.conversation img {
width: 5%;
}
/* Display name */
.conversation h3 {}
/* Recent message */
.conversation p {}
.border-bottom {
border-bottom: 1px solid #000;
}
.border-left {
border-left: 1px solid #000;
}
<body>
<!-- Logo -->
<header class="border-bottom">
<div class="msg-target">
<img src="img/avatar.png">
<h1>Mohammed</h1>
<span class="target-status">Cool status!</span>
<p style="font-weight: bold;">@mohammed32</p>
</div>
<div>
<img class="logo" src="img/logo.png">
<br>
<input type="search" placeholder="Search for conversations">
</div>
</header>
<!-- Recent conversations -->
<div class="recent-conversations border-left">
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
</div>
<!-- -->
</body>
</html>