Question

我有一个导航我做的就像我想要的那样..我唯一的问题是按钮下拉是显示在前2个链接的右边，它是如何首先显示并强制链接显示在最后。

显示下拉后的链接，而不是

logo --------------------- Home- News- Dropdown

显示

logo --------------------- Dropdown- Home- News

下拉应该在最后

CODE

＆＃13;

#siteHeader {
  padding-top: 22px;
  height: 90px;
  background-color: black;
}
.logo {
  display: block;
  height: 45px;
  width: auto;
  float: left;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: auto;
  display: block;
  float: right;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  float: left;
}
li a:hover {
  background-color: #000;
}
.dropbtn {
  background-color: #000;
  color: white;
  padding-top: 16px;
  padding-bottom: 33px;
  font-size: 12px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  min-width: 100px;
}
.dropdown {
  position: relative;
  display: inline-block;
  float: right;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #434343;
  min-width: 185px;
  right: 0;
  text-transform: uppercase;
}
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 12px;
}
.dropdown-content a:hover {
  background-color: #000000
}
.dropdown:hover .dropdown-content {
  display: block;
  float: left;
}
.dropdown:hover .dropbtn {
  background-color: #434343;
  color: white;
}

＆＃13;

<div id="siteHeader">
  <div class="container-fluid">
    <img src="../content/images/official_logo_white.png" class="logo">

    <ul>
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#news">News</a>
      </li>
    </ul>

    <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

只需切换它们

#siteHeader {
    padding-top: 22px; 
    height: 90px;
    background-color: black;
}

.logo {
    display: block;
    height: 45px;
    width: auto;
    float: left;
}



ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: auto;
    display: block;
    float: right;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    float: left;
}

li a:hover {
    background-color: #000;
}



.dropbtn {
    background-color: #000;
    color: white;
    padding-top: 16px;
    padding-bottom: 33px;
    font-size: 12px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    min-width: 100px;   

}

.dropdown {
    position: relative;
    display: inline-block;
    float: right;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #434343;
    min-width: 185px;    
    right: 0;   
    text-transform: uppercase;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 12px;
}

.dropdown-content a:hover {background-color: #000000}

.dropdown:hover .dropdown-content {
    display: block;
    float: left;
}

.dropdown:hover .dropbtn {
    background-color: #434343;
     color: white;
}

<div id="siteHeader">
  <div class="container-fluid">
  <img src="../content/images/official_logo_white.png" class="logo"> 

  <div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
  </ul>

      </div>
      </div>

Answer 2

如果我是你，我会删除这些float并使用flexbox进行简化

＆＃13;

#siteHeader {
  padding-top: 22px;
  height: 90px;
  background-color: black;
}
.container-fluid {
  display: flex
}
.nav {
  flex: 1;
  display: flex;
  justify-content: flex-end
}
.logo {
  flex: 0 50px
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: auto;
  display: block;
}
li {
  display: inline-block
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #000;
}
.dropbtn {
  background-color: #000;
  color: white;
  padding-top: 16px;
  padding-bottom: 33px;
  font-size: 12px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  min-width: 100px;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #434343;
  right: 0;
  text-transform: uppercase;
}
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 12px;
}
.dropdown-content a:hover {
  background-color: #000
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #434343;
  color: white;
}

＆＃13;

<div id="siteHeader">
  <div class="container-fluid">
    <img src="../content/images/official_logo_white.png" class="logo">
    <div class="nav">
      <ul>
        <li><a href="#home">Home</a>
        </li>
        <li><a href="#news">News</a>
        </li>
      </ul>
      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

在<ul>我已将其css属性display: block更改为display: inline-block而对于<div class="dropdown">我已将其设为display: inline-block，因为默认情况下div为块级别因为两者都可以放在同一行中，我将<div>和<ul>都包装到一个<div>，使用float: right

将它们放在右侧

请参阅以下片段中的答案。

＆＃13;

#siteHeader {
  padding-top: 22px;
  height: 90px;
  background-color: black;
}

.logo {
  display: block;
  height: 45px;
  width: auto;
  float: left;
}
.nav {
  float: right;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: auto;
  display: inline-block;
  float: left;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  float: left;
}

.dropdown {
  display: inline-block;
  float: left;
}

＆＃13;

<div id="siteHeader">
  <div class="container-fluid">
    <img src="../content/images/official_logo_white.png" class="logo">
    <div class="nav">

      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
      </ul>

      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

列表项显示不正确

3 个答案: