HTML导航栏在插入float:right属性时翻转

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

HTML Navbar flipping when inserting the float:right property

问题

我有一个HTML导航栏,并且我想把导航栏中的所有元素移到右边。下面,我尝试使用float: right;来实现这个目标。虽然这确实将所有内容移到了右边,但它翻转了整个导航栏(原本在左边的元素现在在右边,反之亦然)。我已经附上了代码。为什么会这样?

<!DOCTYPE html>
<html>

<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-image: linear-gradient(rgb(83, 152, 42), rgb(51, 110, 14));
    }

    li {
      float: right;
      border-right: 1px solid #000;
    }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a,
    .dropbtn {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li.dropdown {
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: rgb(95, 161, 6);
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    li a:hover:not(.active) {
      background-color: rgb(0, 90, 0);
    }

    .active {
      background-color: #04AA6D;
    }

    @media screen and (max-width: 600px) {
      ul li {
        border-right: none;
      }

      ul li {
        float: none;
      }
    }
  </style>
</head>

<body>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Member</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Manual</a></li>
    <li><a href="#">Forums</a></li>
    <li class="dropdown">
      <a href="#" class="dropbtn">Hello there</a>
      <div class="dropdown-content">
        <a href="#">Settings</a>
        <a href="#">Notifications</a>
        <a href="#">Log out</a>
      </div>
    </li>
  </ul>
</body>

</html>
英文:

I have an HTML Navbar, and I want to shift all the elements in the navbar to the right. Below, I have attempted to use float: right; to do so. Although this does move everything to the right, it flips the entire navbar (so that elements that were originally in the left are now on the right, and vice versa). I have attached the code below. Why is it doing this?

<!-- begin snippet: js hide: false console: true babel: false -->

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

 &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(rgb(83, 152, 42), rgb(51, 110, 14));
}
li {
float: right;
border-right: 1px solid #000;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(95, 161, 6);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
li a:hover:not(.active) {
background-color: rgb(0, 90, 0);
}
.active {
background-color: #04AA6D;
}
@media screen and (max-width: 600px) {
ul li {
border-right: none;
}
ul li {
float: none;
}
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-fw fa-home&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Member &lt;i class=&quot;fa fa-fw fa-home&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Manual&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Forums&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;dropdown&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;dropbtn&quot;&gt;Hello there&lt;/a&gt;
&lt;div class=&quot;dropdown-content&quot;&gt;
&lt;a href=&quot;#&quot;&gt;Settings&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Notifications&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Log out&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

答案1

得分: 0

我已经添加了一些样式:display: block, width: 100% 和 text-align: right,它起作用了(重要的是使链接充满整个宽度,以改善用户体验)。

但我建议使用 flex 布局来实现这种布局,并采用移动优先的方法,这意味着您的媒体查询应该是以 min-width 定义的,从小屏幕到大屏幕进行设计。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

祝你好运!

英文:

I have added some display: block, width: 100% and text-align: right and it works (important to make the link full width for improve the user experience)

But, I would recommend to use flex layout to achieve this kind of layouts, and use a mobile first apprach, that meands that your media queryes are defined with min-width to design from small to large screens

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Good luck!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(rgb(83,152,42), rgb(51,110,14));
}
li {
float: right;
border-right:1px solid #000;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(95,161,6);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
li a:hover:not(.active) {
background-color: rgb(0, 90, 0);
}
.active {
background-color: #04AA6D;
}
/** here are the modifications */
@media screen and (max-width: 600px) {
ul li { border-right: none; width: 100% }
ul li { float: none; }
ul li a { display: block; text-align: right; }
li a, .dropbtn { text-align: right; display: block; }
}

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

&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-fw fa-home&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Member &lt;i class=&quot;fa fa-fw fa-home&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Manual&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Forums&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;dropdown&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;dropbtn&quot;&gt;Hello there&lt;/a&gt;
&lt;div class=&quot;dropdown-content&quot;&gt;
&lt;a href=&quot;#&quot;&gt;Settings&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Notifications&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Log out&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;

<!-- end snippet -->

答案2

得分: 0

你可以在父级 ul 上使用 display: flexjustify-content: flex-end 来使当前顺序对齐到末尾。

ul {
 display: flex;
 justify-content: flex-end;
}

示例:

<!DOCTYPE html>
<html>

<head>
  <style>
    ul {
      display: flex;
      justify-content: flex-end;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-image: linear-gradient(rgb(83, 152, 42), rgb(51, 110, 14));
    }

    li {
      /* float: right; */
      border-right: 1px solid #000;
    }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a,
    .dropbtn {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li.dropdown {
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: rgb(95, 161, 6);
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    li a:hover:not(.active) {
      background-color: rgb(0, 90, 0);
    }

    .active {
      background-color: #04AA6D;
    }

    @media screen and (max-width: 600px) {
      ul li {
        border-right: none;
      }

      ul li {
        float: none;
      }
    }
  </style>
</head>

<body>
  <ul>
    <li><a href="#">Home<i class="fa fa-fw fa-home"></i></a></li>
    <li><a href="#">Member <i class="fa fa-fw fa-home"></i></a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Manual</a></li>
    <li><a href="#">Forums</a></li>
    <li class="dropdown">
      <a href="#" class="dropbtn">Hello there</a>
      <div class="dropdown-content">
        <a href="#">Settings</a>
        <a href="#">Notifications</a>
        <a href="#">Log out</a>
      </div>
    </li>
  </ul>
</body>

</html>
英文:

You can use display display: flex and justify-content: flex-end on parent ul to align to the end on current order.

ul {
display: flex;
justify-content: flex-end;
}

Example:
<!-- begin snippet: js hide: false console: true babel: false -->

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

 &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
ul {
display: flex;
justify-content: flex-end;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(rgb(83, 152, 42), rgb(51, 110, 14));
}
li {
/* float: right; */
border-right: 1px solid #000;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(95, 161, 6);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
li a:hover:not(.active) {
background-color: rgb(0, 90, 0);
}
.active {
background-color: #04AA6D;
}
@media screen and (max-width: 600px) {
ul li {
border-right: none;
}
ul li {
float: none;
}
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;i class=&quot;fa fa-fw fa-home&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Member &lt;i class=&quot;fa fa-fw fa-home&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Manual&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Forums&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;dropdown&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;dropbtn&quot;&gt;Hello there&lt;/a&gt;
&lt;div class=&quot;dropdown-content&quot;&gt;
&lt;a href=&quot;#&quot;&gt;Settings&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Notifications&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Log out&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月10日 21:51:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76219254.html
匿名

发表评论

匿名网友

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

确定