我想使用 flexbox 并排放置兩個元素，但在 Windows 10 的 Google Chrome 上它不起作用。
先決條件
彈性盒不起作用。
期望值
我想使用 flexbox 水平對齊 li 標簽。
繁殖程式
請運行下面的代碼。
.header {
.header__profile-button {
img {
width: 120px;
height: 40px;
}
}
}
.header__nav {
ul {
display: flex;
list-style: none;
}
li {
display: block;
}
}<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ポートフォリオサイト1</title>
<link rel="stylesheet" href="./dist/css/header.css" type="text/css">
</head>
<body>
<header class="header">
<a href="index.html" class="header__profile-button"><img src="image/logo.svg" alt="プロフィール"></a>
<nav class="header__nav">
<ul>
<li><a href="" class="header__nav_link">About</a></li>
<li><a href="" class="header__nav_link">Bicycle</a></li>
</ul>
</nav>
</header>
<!-- Abbreviated below. -->uj5u.com熱心網友回復：
你可以將你的串列項從他們的串列中取出，并將你的 flexbox CSS 放在你的 header_nav 類上：
.header__nav {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
HTML：
<nav class="header__nav">
<a href="" class="header__nav_link">About</a>
<a href="" class="header__nav_link">Bicycle</a>
</nav>
結果：
.header {
.header__profile-button {
img {
width: 120px;
height: 40px;
}
}
}
.header__nav {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
ul {
display: flex;
flex-direction: row;
}
li {
display: block;
}
}<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ポートフォリオサイト1</title>
<link rel="stylesheet" href="./dist/css/header.css" type="text/css">
</head>
<body>
<header class="header">
<a href="index.html" class="header__profile-button"><img src="image/logo.svg" alt="プロフィール"></a>
<nav class="header__nav">
<a href="" class="header__nav_link">About</a>
<a href="" class="header__nav_link">Bicycle</a>
</nav>
</header>
<main class="main">
<div class="main__mainvisual">
<img class="main__mainvisual-image" src="image/mainvisual (1).jpg" alt="メインビジュアル">
</div>
<div class="main__about">
<p class="main__about-title">About</p>
<img class="main__profile-icon-image"src="image/about.jpg" alt="プロフィールアイコン">
<p class="main__name-text">Yusuke Oyama</p>
<p class="main__introduction-text">
初めまして。小山優輔と申します。
KaiYコミュニティという開発コミュニティで、QAエンジニアをやっています。
自転車と萬年筆が大好きです。よろしくお願いいたします。
</p>
</div>
<div class="bicycle">
<div class="bicycle__bicycle-image">
<img src="image/bicycle1.jpg" alt="">
</div>
<div class="bicycle__bicycle-image">
<img src="image/bicycle2.jpg" alt="">
</div>
<div class="bicycle__bicycle-image">
<img src="image/bicycle3.jpg" alt="">
</div>
</div>
</main>
<footer class="footer">
<p class="footer__text">
?2021 Yusuke Oyama
</p>
</footer>
</body>
</html>uj5u.com熱心網友回復：
只需移除環繞 ul 和 li 的 header__nav。
.header {
.header__profile-button {
img {
width: 120px;
height: 40px;
}
}
}
ul {
display: flex;
list-style: none;
gap: 60px;
}
li {
display: block;
}<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ポートフォリオサイト1</title>
<link rel="stylesheet" href="./dist/css/header.css" type="text/css">
</head>
<body>
<header class="header">
<a href="index.html" class="header__profile-button"><img src="image/logo.svg" alt="プロフィール"></a>
<nav class="header_nav">
<ul>
<li><a href="" class="header__nav_link">About</a></li>
<li><a href="" class="header__nav_link">Bicycle</a></li>
</ul>
</nav>
</header>
<main class="main">
<div class="main__mainvisual">
<img class="main__mainvisual-image" src="image/mainvisual (1).jpg" alt="メインビジュアル">
</div>
<div class="main__about">
<p class="main__about-title">About</p>
<img class="main__profile-icon-image" src="image/about.jpg" alt="プロフィールアイコン">
<p class="main__name-text">Yusuke Oyama</p>
<p class="main__introduction-text">
初めまして。小山優輔と申します。 KaiYコミュニティという開発コミュニティで、QAエンジニアをやっています。 自転車と萬年筆が大好きです。よろしくお願いいたします。
</p>
</div>
<div class="bicycle">
<div class="bicycle__bicycle-image">
<img src="image/bicycle1.jpg" alt="">
</div>
<div class="bicycle__bicycle-image">
<img src="image/bicycle2.jpg" alt="">
</div>
<div class="bicycle__bicycle-image">
<img src="image/bicycle3.jpg" alt="">
</div>
</div>
</main>
<footer class="footer">
<p class="footer__text">
?2021 Yusuke Oyama
</p>
</footer>
</body>
</html>uj5u.com熱心網友回復：
它不起作用，因為您的 css 沒有正確定位，您正在使用 sass，所以您的 li 也應該在您的 sass 中進入 ul 中，例如
而不是這個，
.header__nav {
ul {
display: flex;
list-style: none;
}
li {
display: block;
}
}
使用它，它肯定會起作用。
.header__nav {
ul {
display: flex;
list-style: none;
li {
display: block;
}
}
}
uj5u.com熱心網友回復：
在您的代碼中使用此 CSS：
.card {
display: flex;
flex-direction: column;
}
.card .content-item {
flex: 1 1 auto;
}
HTML：
<div class="card">
<div class="card">
<div class="content-item">
<p>What is Lorem Ipsum?</p>
</div>
</div>
<div class="card">
<div class="content-item">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/387173.html