我遇到了Flexbox的问题?

huangapple go评论76阅读模式
英文:

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 我遇到了Flexbox的问题?

你可以将 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 我遇到了Flexbox的问题?

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: &#39;REM&#39;, sans-serif;
}

.navbar-list {
  display: flex;
  /* Styling (not necessary)*/
  list-style-type: none;
  gap: 1rem;
  padding: 0;
}

<!-- language: lang-html -->

&lt;div class=&quot;navbar&quot;&gt;
  &lt;ul class=&quot;navbar-list&quot;&gt;
    &lt;li class=&quot;list-items&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;Mystery Inc.&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;list-items&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;list-items&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;Products&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;list-items&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;Login&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;list-items&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;Search&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月4日 06:38:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76831976.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定