Как я могу поместить элементы под встроенный элемент? - PullRequest
Новая
       5

Как я могу поместить элементы под встроенный элемент?

0 голосов
/ 23 сентября 2019

Я создал разделенное навигационное меню, используя два элемента ul, поэтому я использовал 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>

    .topnav li {
      display: inline;
    }

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

Ответы [ 4 ]

1 голос
/ 23 сентября 2019

добавьте <div class="clear"></div> конец topnav div и добавьте clear: оба CSS к классу .clear 

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>
0 голосов
/ 23 сентября 2019

Вот код и надеюсь, что это поможет вам понять, что вам не нужно всегда использовать поплавки для навигации или выравнивания по горизонтали. 

/*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>
0 голосов
/ 23 сентября 2019 

/*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>
0 голосов
/ 23 сентября 2019

Вы должны сохранить свой стиль в блоке <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>
...