Question

我在div中的元素没有显示为内联我认为我不应该使用nav然后div但我认为如果我重新开始我将会遇到很多问题我该如何修复它？

顺便告诉你我第四天学习css和html

＆＃13;

.body {
  margin: 0 auto;
  width: 100%;
  clear: both;
}
.mainHeader nav {
  background-color: #DC143C;
  height: auto;
  width: 1264px;
  display: inline-block;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin: 0px 0px 0px 0px;
}
.mainHeader nav ul.left {
  list-style: none;
  display: inline;
  position: relative;
  float: left
}
.mainHeader div.right {
  list-style: none;
  display: table-row;
  position: relative;
  float: right;
  margin: 18px 20px 10px 0px;
}
.mainHeader nav ul li {
  float: left;
  display: inline;
  padding-left: 10px
}
.mainHeader div.border {
  width: 0px;
  height: 50px;
  float: left;
  border: 1px inset;
  color: #DC143C;
  margin: 25px 0px 0px 150px;
}

＆＃13;

<html>

<head>

</head>

<body class="body">
  <header class="mainHeader">

    <nav>
      <ul class="left">
        <li>
          <a href="#">
            <img style="width:150px;height:70px" src="img/1.gif">
          </a>
        </li>
        <li>
          <a href="#">
            <input type="text" name="search" placeholder="Search..">
        </li>
        </a>
        <li><a href="#"><h2>1</h2></a>
        </li>
        <li><a href="#"><h2>1</h2></a>
        </li>
        <li><a href="#"><h2>1</h2></a>
        </li>
      </ul>
      <div class="border">
        <ul class="right">
          <li><a href="#"><h3> 2</h3></a>
          </li>
          <li><a href="#"><h3> 2</h3></a>
          </li>
          <li>
            <a href="#">
              <img style="width:20px;height:20px" screen="img/16">
            </a>
          </li>
          <!-- bookmark-->
          <li>
            <a href="#">
              <img style="width:20px;height:20px" screen="img/17">
            </a>
          </li>
          <!-- history -->
    </nav>
    </ul>
</body>

</html>

＆＃13;

Answer 1

你没有关闭div标签

<div class="border"></div>

你的css在行上是错误的：

 .mainHeader div.right{
    list-style:none;
    display:table-row;
    position: relative;
    float:right;
    margin:18px 20px 10px 0px;
}

应该是ul标签：

.mainHeader ul.right{
        list-style:none;
        display:table-row;
        position: relative;
        float:right;
        margin:18px 20px 10px 0px;
    }

在导航

之前检查我的代码在哪里是关闭元素/ ul标记

    .body{
        margin:0 auto;
        width:100%;
        clear:both;
    }
    .mainHeader nav{
        background-color:#DC143C;
        height:auto;
        width:1264px;
        display: inline-block;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        margin:0px 0px 0px 0px;
    }
    .mainHeader nav ul.left{
        list-style:none;
        display:inline;
        position: relative;
        float:left
    }
    .mainHeader ul.right{
        list-style:none;
        display:table-row;
        position: relative;
        float:right;
        margin:18px 20px 10px 0px;
    }
    .mainHeader nav ul li{
        float:left;
        display:inline;
        padding-left: 10px
    }
    .mainHeader div.border{
      width: 0px; 
      height: 50px;
      float: left; 
      border: 1px inset;
      color:#DC143C;
      margin: 25px 0px 0px 150px ;
    }

<header class="mainHeader">

    <nav>
    <ul class="left">
        <li><a  href="#"><img style="width:150px;height:70px" src="img/1.gif"></a></li>
        <li><a  href="#"><input type="text" name="search" placeholder="Search.."></li></a>
        <li><a  href="#"><h2>1</h2></a></li>
        <li><a  href="#"><h2>1</h2></a></li>
        <li><a  href="#"><h2>1</h2></a></li></ul>
        <div class="border"></div>
        <ul class="right">
        <li><a  href="#"><h3> 2</h3></a></li>
        <li><a  href="#"><h3> 2</h3></a></li>
        <li ><a  href="#"><img style="width:20px;height:20px" screen="img/16"></a></li>  <!-- bookmark--> 
        <li><a  href="#"><img style="width:20px;height:20px" screen="img/17"></a></li>  <!-- history -->
    </ul></nav>

Answer 2

.body {
  margin: 0 auto;
  width: 100%;
  clear: both;
}
.mainHeader nav {
  background-color: #DC143C;
  height: auto;
  width: 1264px;
  display: inline-block;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin: 0px 0px 0px 0px;
}
.mainHeader nav ul.left {
  list-style: none;
  display: inline;
  position: relative;
  float: left
}
.mainHeader div.right {
  list-style: none;
  display: table-row;
  position: relative;
  float: right;
  margin: 18px 20px 10px 0px;
}
.mainHeader nav ul li {
  float: left;
  display: inline;
  padding-left: 10px
}
.mainHeader div.border {
  width: 0px;
  height: 50px;
  float: left;
  border: 1px inset;
  color: #DC143C;
  margin: 25px 0px 0px 150px;
}

<header class="mainHeader">

    <nav>
        <ul class="left">
            <li>
                <a href="#">
                    <img style="width:150px;height:70px" src="img/1.gif">
                </a>
            </li>
            
          <li style="display:flex; height:70px;">
                <a href="#" style="margin:auto;"> 
                    <input type="text" name="search" placeholder="Search..">
                </a>
            </li>

            <li><a href="#"><h2>1</h2></a>
            </li>
            <li><a href="#"><h2>1</h2></a>
            </li>
            <li><a href="#"><h2>1</h2></a>
            </li>
        </ul>
        <div class="border">
            <ul class="right">
                <li><a href="#"><h3> 2</h3></a>
                </li>
                <li><a href="#"><h3> 2</h3></a>
                </li>
                <li>
                    <a href="#">
                        <img style="width:20px;height:20px" screen="img/16">
                    </a>
                </li>
                <!-- bookmark-->
                <li>
                    <a href="#">
                        <img style="width:20px;height:20px" screen="img/17">
                    </a>
                </li>
                <!-- history -->
            </ul>
    
        
</div>
    </nav>
</header>

希望这有帮助。

无法使我的div内联

2 个答案: