Question

我使用两个ul元素创建了一个分离式导航菜单，因此我使用了内联命令使项目彼此水平。现在，当我尝试在导航菜单下添加元素时，除非我添加了几行，否则它们与之内联。

我不知道如何在保持水平导航栏的同时获得正确的布局。

<div class="topnav">
      <ul class="leftnav">
        <li><a href="#home">BRAND</a></li>
      </ul>

      <ul class="rightnav">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#personal">PERSONAL</a></li>
      </ul>
    </div>
    
    <div class="content">
      <hr>
      <p>text</p>

    </div>
  </div>

    .topnav li {
      display: inline;
    }

https://codepen.io/mishlc/pen/dybwwYW

Answer 1

在<div class="clear"></div>格的末尾添加topnav 并将 clear：both CSS添加到.clear class

body {
   width: 80%;
   margin: auto;
}
.topnav li {
    display: inline;
    font-family: "Alegreya Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.topnav a {
    color: #282828;
    text-decoration: none;
}
.leftnav {
    font-size: 1.4em;
    float: left;
    padding-left: 1em;
    padding-right: 1em;
}
.rightnav {
    font-size: 1em;
    padding-right: 1em;
    float: right;
    margin-top: 1.7em;
}
.rightnav a {
   margin-right: 1em;
}
.rightnav a:hover {
    color: #c71132;
}
.rightnav a.active {
    color: #c71132;
}
.clear{
     clear: both;
}

html代码

<div class="wrapper">
    <div class="topnav">
        <ul class="leftnav">
            <li><a href="#home">BRAND</a></li>
         </ul>
         <ul class="rightnav">
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#portfolio">PORTFOLIO</a></li>
            <li><a href="#personal">PERSONAL</a></li>
          </ul>
         <div class="clear"></div>
    </div>
    <div class="content">
      <hr>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  </div>

Answer 2

/*if you want to show both list in line, otherwise remove it*/
.topnav ul {
  display: inline;
}

.topnav ul li {
  display: inline;
}

<div class="topnav">
      <ul class="leftnav">
        <li><a href="#home">BRAND</a></li>
      </ul>

      <ul class="rightnav">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#personal">PERSONAL</a></li>
      </ul>
    </div>
    
    <div class="content">
      <hr>
      <p>text</p>

    </div>
  </div>

Answer 3

这是代码，希望这能帮助您理解不需要总是使用浮点数进行导航或水平对齐。

/*body {
   width: 80%;
   margin: auto;
}
.topnav li {
    display: inline;
    font-family: "Alegreya Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.topnav a {
    color: #282828;
    text-decoration: none;
}
.leftnav {
    font-size: 1.4em;
    float: left;
    padding-left: 1em;
    padding-right: 1em;
}
.rightnav {
    font-size: 1em;
    padding-right: 1em;
    float: right;
    margin-top: 1.7em;
}
.rightnav a {
   margin-right: 1em;
}
.rightnav a:hover {
    color: #c71132;
}
.rightnav a.active {
    color: #c71132;
}
.clear{
     clear: both;
}*/

*{box-sizing:border-box;}
body {
   width: 80%;
   margin: auto;
   padding:0;
   margin:0;
}
.topnav{
  font-family: "Alegreya Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;
  display:block;
  width:100%;
}
.leftnav,.rightnav{
  text-decoration:none;
  list-style-type:none;
  padding:0;margin:0;
}
.leftnav{
  display:inline-block;
  max-width:30%;
  
}
.rightnav{
  display:inline-block;
  max-width:calc(100% - (30% + 30%));
  min-width: calc(100% - (30% + 30%));
  margin-left:30%;
  
}
.leftnav li,.rightnav li{
  display:inline-block;
}
.leftnav li{
  width:100%;
}
.rightnav li{
  width: 32.5%;
  padding: 0;
  box-sizing: border-box;
  margin: 0 0.05%;
}
.rightnav a {
   display:block;
   width:100%;
}
.rightnav a:hover {
    color: #c71132;
}
.rightnav a.active {
    color: #c71132;
}
.rightnav a:hover, .rightnav a.active{
  text-decoration:none;
}

<div class="wrapper">
    <div class="topnav">
        <ul class="leftnav">
            <li><a href="#home">BRAND</a></li>
         </ul>
         <ul class="rightnav">
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#portfolio">PORTFOLIO</a></li>
            <li><a href="#personal">PERSONAL</a></li>
          </ul>
        <!--  <div class="clear"></div> -->
    </div>
    <div class="content">
      <hr>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  </div>

Answer 4

您必须将样式保留在<style></style>块中。意思是

<style>
    .topnav li {
      display: inline;
    }
</style>

<html>
<head>
  <style>
    .topnav li {
  display: inline;
}
  </style>
</head>
<div class="topnav">
      <ul class="leftnav">
        <li><a href="#home">BRAND</a></li>
      </ul>

      <ul class="rightnav">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#personal">PERSONAL</a></li>
      </ul>
    </div>
    
    <div class="content">
      <hr>
      <p>text</p>

    </div>
  
</html>

如何将元素放在内联元素下？

4 个答案: