Question

我的div标签名为2nd-bar不会显示在导航栏下方，也不会显示底部边框，因此我的列表元素也不会出现在其中。我是HTML和CSS的新手，很高兴获得帮助，谢谢，这是我的代码。

<htmL>
    <head>
    <title>Lawyer Up</title> 
    </head>
    <link rel="shortcut icon" type="image/png" href="file:       
    /User/rahul%20saini/Desktop/Testproject1/index.png"/> 
    <link href="https://fonts.googleapis.com/css?family=Oxygen"
    rel="stylesheet"> 
    <style type = "text/css">
        body{
            /* background-color:#F8B195; */
        }
        #navibar{
            position: relative;
           width: 100%;
           height: 45px;
        /*  background-color: #355C7D; */
        padding: 0px;
            margin: 0px;
           }

        #logo{
            width:45px;
            height: 45px;
            float: left;
           padding-right:4px;
        }

        .give-border{
            border-bottom-color: darkgrey;
            border-bottom-style: inset;
            border-bottom-width: medium;
            width: 1px;
            height: 2px;
        }

        #searchlogo{
             float:right;
            width: 25px;
            height: 25px;
            position: absolute;
            top: 2px;
            left: 160px;
        }

        .border{
            float:right;
            position: absolute;
            top: 0px;
            left: 154px;
            border-left-color:darkslategrey;
            border-left-style: solid;
            height: 30px;
            border-left-width: thin;
          }

        #loginlogo{
            float:right;
            position: relative;
            top:-24px;
            left: -10px;
            border-left-color: darkslategray;
            border-left-style: dotted;
            }

        .bordertop{
            float: left;
            border: 1px;
            border-left-color: #302929;
            border-left-style: solid;
            height: 45px;
            padding-left: 4px;
           }

        #thename{
            font-size: 2em;
            font-weight: bolder;
            font-family: 'oxygen',sans-serif;
            color: #000033;
            padding-left: 3px;
        }

        #2ndbar{
            float: left
            margin: 0px;
            width: 20px;
            height: 20px;
            background-color: antiquewhite;
            border-bottom-color: dimgrey;
            border-bottom-style: double;
            border-bottom-width: thin;
                }

        #navibar a{
            float:right;
            font-size: 150%;
            color:#F67280;
            padding: 5px 10px 5px 10px;
            text-decoration: none;
        }

        a:hover{
            font-size: 150%;
            text-decoration: underline;
            color: wheat;
             background-color: skyblue;
            background-size: contain;
             transition-property: background;
             transition-duration: 0.8s;
             }


      body{
          margin: 0px;
          padding: 0px;
        }

        h1{
            text-align: center;
            font-size: 50px;
            font-weight: 100;
            font-family: sans-serif;
            color: brown;
            }

        .input{
            position:relative;
            left: 1100px;
            width: 185px;
            height: 30px;
            top:6px;
            }

        .input input{
            position: relative;
            height: 30px;
            width: 150px;
            top:-45px;
            background-color: #E9E9E9;
        }

        ul{
            list-style-type: none;
        }
        .list{
            float:left;
            padding-right: 10px;
            border-right-style: solid;
            border: 1px;
            border-right-width: thin;
            border-right-color: aqua;
        }
      </style>
      <body>
     <div id="fullpage">
    <div id="navibar" class="give-border">
       <img id="logo" src="logo.png">
      <div id="thename" >   
        <span class="bordertop" >Lawyer Up</span>
        </div>   
         <div class="input">
           <form>
             <input type="search" placeholder="Search">
           </form>
            <div class="border">
             </div>
             <img id="searchlogo" src="search.png">
         </div>
           <div id="loginlogo">
               <a href="login.html">
         <img src="login.png">
               </a>
        </div>
      </div> 
       <div id="2ndbar">
           <ul>  
             <li class ="list">name</li>
             <li class="list">another name</li> 
             <li class="list">one more name</li>
           </ul>
       </div>
     <!--   <h1> Welcome </h1> -->
    </div>     <! div=fullpage >
    </body>  
    </htmL

问题是第二个栏不起作用Idk为什么，我进行了一些更改，但我仍然无法理解为什么，我认为这可能是由于我为div所提供的职位，但是我尝试了那也是如此，如果有人可以帮助我或告诉我我在做什么错，那将是一个很大的帮助。

Answer 1

在HTML中，您不能以数字开头id。尝试将id从2ndbar更改为bar2，从那时起您的样式就会影响它。

我的HTML div标签不会包含列表，也不会显示底部边框

1 个答案: