导航栏 HTML 和 CSS

足球生活

我正在处理导航栏,它目前看起来像这样:

在此处输入图片说明

现在我希望文本向右浮动。这样红色空间就在左侧。但是如果尝试“float: right”,它看起来像这样:

在此处输入图片说明

红色背景消失了。我使用了一个额外的 div(columnsection),但在最好的情况下我想摆脱它。我希望有人可以帮助我。

* {
  padding: 0px;
  margin: 0px;
}

#navbar {
  margin: auto;
  width: 100%;
  max-width: 1200px;
  background-color: red;
  color: white;
}

#navbar ul li {
  display: inline-block;
  background-color: blue;
  margin: 0px;
}

#navbar ul {
  float: right;
}
<div id="navbar">
  <div id="columnsection">
    <ul>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
    </ul>
  </div>

j08691

而不是float:right使用text-align:right

* {
  padding: 0px;
  margin: 0px;
}

#navbar {
  margin: auto;
  width: 100%;
  max-width: 1200px;
  background-color: red;
  color: white;
}

#navbar ul li {
  display: inline-block;
  background-color: blue;
  margin: 0px;
}

#navbar ul {
  text-align: right;
}
<div id="navbar">
  <div id="columnsection">
    <ul>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
      <li> Lorem </li>
    </ul>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

导航栏的HTML和CSS问题

HTML 和 CSS 的问题:图标和导航栏问题

我无法单击导航栏HTML和CSS

具有图像的CSS和HTML导航栏列表

如何使用CSS和HTML将导航栏居中

仅使用 CSS 和 html 的响应式导航栏

使用html和CSS导航栏周围的边距问题

带有HTML和CSS的多级悬停导航栏

无精打采的HTML和CSS导航栏-无法通过链接填充扩展导航栏

如何使用html,css和js一起包含侧边栏和导航栏

HTML/CSS 导航栏着色

HTML/CSS 导航栏乱序

使用html和CSS将导航条和文章定位在导航栏下方

我可以在HTML和CSS中将侧边栏贴到屏幕的左侧还是右侧?(不是导航栏)

通用导航栏和侧栏HTML

无溢出:具有页脚和导航栏的全屏轮播HTML CSS JS

HTML + CSS-顶部导航栏和2张图片之间的文字

HTML5 / CSS3-IE11与chrome和Firefox的显示导航栏不同

为什么我的导航栏没有使用 HTML CSS 和 Bootstrap 显示?

在导航栏中对齐图像两侧的文本(html 和 css)

如何仅使用CSS和HTML将图像添加到固定的导航栏

在HTML和CSS中具有左,中和右的迷你导航栏

使用 CSS 和 HTML 在导航栏上方制作横幅,徽标/图标在文本左侧浮动

Html 和 css 导航栏浮动元素需要在同一行

如何制作两行导航栏?仅使用HTML和CSS

使用HTML和CSS将图像添加到导航栏

HTML/CSS 导航栏对齐和背景颜色不起作用

如何仅使用 HTML、CSS 和 Javascript 突出显示导航栏

CSS-隐藏导航栏和页脚