旁白一直飘到右边，不知道该怎么修

Aside keeps floating all the way to the right, not sure how to fix it

本文关键字：不知道 右边 白一直 一直      更新时间：2023-09-26

在我的第一个项目网站上工作时，我似乎不明白为什么我的旁白一直向右。我试过在CSS中修复它，但没有成功。我最好尝试用Jquery来修复它，只是找不到合适的单词。谢谢大家花时间看它，很抱歉它看起来很乱。

我的HTML代码：

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Clan Cian:</title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to Clan Cian's home</h1>
 </header>
 <ul id="navbar">
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Clan Cian</a>
           <ul id="cian">
             <li><a href="#">History</a></li>
             <li><a href="#">Surnames</a></li>
             <li><a href="#">O'Carroll Arms</a></li>
           </ul>
         </li>
        <li><a href="#">Cheftains</a></li>
        <li><a href="#">Clan Officers</a></li>
        <li>
          <a href="#">Library</a>
          <ul id="members">
            <li><a href="#">Poetry</a></li>
            <li><a href="#">Receipes</a></li>
            <li><a href="#">Rest in Peace</a></li>
         </ul>
        </li>
        <li><a href="#">Membership</a></li>
        <li>
          <a href="#">Clan Links</a>
          <ul id="links">
          <li><a href="#">Lineage</a></li>
          </ul>
         </li>
         <li><a href="#">Guestbook</a></li>
        </ul>
  <div id="wrapper">
 <div id="container">
 <aside>
 <h3>Upcoming Events</h3>
 <p>None at this time</p>
</aside>
</section>
<footer>
   <p>Copyright 2015 Clan Cian-O'Carroll All Right Reserved</p>
     <a href="#">Contact webmaster for questions or concerns on the site</a>
     </footer>
</div>
</div>
</body>
</html>

我的CSS代码：

  body {background:      url("https://farm8.staticflickr.com/7614/16858889001_cbae105eb4_q.jpg");
  width:900px
  margin:0 auto;
  }
#wrapper {background-color:#fff;
        font-family:Arial, Helvetica
      }
  #container {
       text-align:center;
       font-size:16px;
            }

header {color:black;
 text-align:center;
 }
   *{
   margin:0;
   padding:0;
   font-size:16px;
 }
#navbar,
#navbar ul{
    list-style:none;
    }
      #navbar>li{
       float:left;
          }
     #navbar li a{
         display: block;
         height: 20px;
         padding:10px;
         text-decoration:none;
        }
   #navbar>li>a{
         background-color:#008B8B;
         color:#A52A2A;
         }
 #cian,
 #members,
  #links    {
       position:absolute;
       background-color:#008B8B;
       z-index:9999;
       display:none;
       }
 #cian,
 #members,
  #links>li>a{
        color:#A52A2A;
        width:auto;
          }
          #navbar li a: hover{
         background-color:#008B8B;
         color:#A52A2A;
            }
 #navbar li:hover #cian{
             display:block;
               }
#navbar li:hover #members{
             display:block;
               }
#navbar li:hover #links{
             display:block;
           }
aside {background-color:#fff;
    float:right;
   }
footer {100%
     display:inline-block;
     clear:both;
     font-size:10px;
    }

您的CSS中有float：对吗？移除它。

 aside {background-color:#fff;
 float:right;
       }
相关文章：