英文:
I'm having Flexbox issues?
问题
CSS部分已翻译如下：
* {
font-family: 'REM', sans-serif;
}
.navbar {
display: flex;
flex-direction: row;
}
如果您需要更多翻译，请告诉我。
英文:
So I am working on a navigation bar for a website and display:flex; won't work. Any ideas?
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=REM:wght@300&display=swap');
</style>
<title>IDK YET</title>
</head>
<body>
<div class="navbar">
<ul>
<li class="list-items">
<a href="#">Mystery Inc.</a>
</li>
<li class="list-items">
<a href="#">Home</a>
</li>
<li class="list-items">
<a href="#">Products</a>
</li>
<li class="list-items">
<a href="#">Login</a>
</li>
<li class="list-items">
<a href="#">Search</a>
</li>
</ul>
</div>
</body>
</html>
This is all the HTML there is. I've tried doing other tags, design, and other things and it will not work.
CSS
* {
font-family: 'REM', sans-serif;
}
.navbar {
display: flex;
flex-direction: row;
}
The CSS is very basic and is literally just the font with the flexbox instructions. So my main question is if this I have right now, why isn't it converting to a row???
答案1
得分: 1
弹性盒子 (Flexbox) 运行正常，但是你的 ul 元素没有设置 display: flex，只有容器元素设置了。这意味着弹性盒子只包含一个元素（ul），而 ul 仍然垂直显示。尝试为 ul 添加样式。
此外，flex-direction 默认为 row 
你可以将 list-style-type 设置为 none，以去除 li 标签上的圆点标记。还可以使用 gap 来调整间距。
示例:
* {
font-family: 'REM', sans-serif;
}
.navbar-list {
display: flex;
/* 样式（非必需） */
list-style-type: none;
gap: 1rem;
padding: 0;
}
<div class="navbar">
<ul class="navbar-list">
<li class="list-items">
<a href="#">Mystery Inc.</a>
</li>
<li class="list-items">
<a href="#">Home</a>
</li>
<li class="list-items">
<a href="#">Products</a>
</li>
<li class="list-items">
<a href="#">Login</a>
</li>
<li class="list-items">
<a href="#">Search</a>
</li>
</ul>
</div>
希望这能帮助你修复样式问题。
英文:
Flexbox is working fine, but your ul element does not have display: flex, only your container element does. This means that the flexbox only contains one element (the ul), and the ul is still being displayed vertically. Try styling the ul instead.
Also, flex-direction is row by default
You can set list-style-type to none to remove the circular markers from the li tags. And, you can use gap to space it out a bit.
Example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
font-family: 'REM', sans-serif;
}
.navbar-list {
display: flex;
/* Styling (not necessary)*/
list-style-type: none;
gap: 1rem;
padding: 0;
}
<!-- language: lang-html -->
<div class="navbar">
<ul class="navbar-list">
<li class="list-items">
<a href="#">Mystery Inc.</a>
</li>
<li class="list-items">
<a href="#">Home</a>
</li>
<li class="list-items">
<a href="#">Products</a>
</li>
<li class="list-items">
<a href="#">Login</a>
</li>
<li class="list-items">
<a href="#">Search</a>
</li>
</ul>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论