在對象內定位CSS對象

Question

我有一個div，裏面有幾個對象。我的左右兩側都有物品。左側似乎很好。右側我有兩個對象，我需要對齊右上角。當我將mybelmont-icon.png靠得太近時，它開始垂直拉伸菜單。關於如何解決這個問題的任何想法？

<div id="outer"> 
    <div id="inner"> 
     <img src="images/belmont-logo.png" align="left"> 
     <img src="images/dot-divider.png" align="left"> 
     <img src="images/prospective-students.png" align="left"> 
     <div class="quicklinks" align="right"> 
      <div style="margin-left:500px; float:left;"><img src="images/mybelmont-icon.png"></div> 
      <ul class="menu"> 
       <li class="menu-item"> 
        <b>Quick Links >></b> 
        <ul class="sub-menu clearfix"> 
         <li class="menu-item"> 
          <b><u>Heading 1</u></b> 
         </li> 
         <li class="menu-item"> 
          <b><u>Heading 2</u></b> 
         </li> 
         <li class="menu-item"> 
          <b><u>Heading 3</u></b> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> Academics</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> Admissions</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> Financial Aid</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> President's Message</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> Why Belmont</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> Board of Trustees</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> Giving</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> MyBelmont</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> Apply Now</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> Majors & Programs</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> Facebook</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#"> Twitter</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div>  
    </div> 
</div> 

CSS：

body{ 
    background-color: #ccc; 
    height:100%; 
    margin:0px; 
} 

.clearfix:before, .clearfix:after { 
    content: " "; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    *zoom: 1; 
} 

.quicklinks a{ 
    color: #ffffff; 
    text-decoration:none; 
} 

.quicklinks a:visted{ 
    color: #ffffff; 
    text-decoration:none; 
} 

.quicklinks a:hover{ 
    color: #ffffff; 
    text-decoration:none; 
} 

.quicklinks a:active{ 
    color: #ffffff; 
    text-decoration:none; 
} 

.menu { 
    background: #f36f21; 
    margin: 0; 
    list-style-type: none; 
    padding: 5px 15px 5px 15px; 
    position: relative; 
    width: 110px; 
} 

.menu .menu-item:hover .sub-menu { 
    display: block; 
} 

.sub-menu { 
    background: #f36f21; 
    display: none; 
    margin: 0; 
    padding: 10px; 
    position: absolute; 
    right: 0; 
    width: 400px; 
    text-align: left; 
} 

.sub-menu .menu-item { 
    display: inline; 
    float: left; 
    padding: 0 10px 0 10px; 
    width: 100px; 
} 

.quicklinks{ 
    margin: 0; 
    padding: 0; 
} 

#outer{ 
    background-color:#003366; 
    height:120px; 
} 

#orangebar{ 
    background-color:#f36f21; 
    height:5px; 
} 

#inner{ 
    width:1024px; 
    height:auto; 
    color: #ffffff; 
    background-color:#003366; 
    margin:0px auto 0 auto; 
} 

而這裏的a live preview。

我想通了。您可以通過將對象分配給float：right來完成任務。很棒。謝謝你看着它們。

<div id="outer"> 
    <div id="inner"> 
     <img src="images/belmont-logo.png" align="left"> 
     <img src="images/dot-divider.png" align="left"> 
     <img src="images/prospective-students.png" align="left"> 
     <div class="quicklinks"> 
      <ul class="menu"> 
       <li class="menu-item"> 
        <b>Quick Links >></b> 
        <ul class="sub-menu clearfix"> 
         <li class="menu-item"> 
          <b><u>Heading 1</u></b> 
         </li> 
         <li class="menu-item"> 
          <b><u>Heading 2</u></b> 
         </li> 
         <li class="menu-item"> 
          <b><u>Heading 3</u></b> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> Academics</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> Admissions</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> Financial Aid</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> President's Message</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> Why Belmont</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> Board of Trustees</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> Giving</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> MyBelmont</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> Apply Now</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> Majors & Programs</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> Facebook</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">> Twitter</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <img style="float: right;" src="images/mybelmont-icon.png">  
    </div> 
</div> 

.quicklinks{ 
    float: right; 
    color: #ffffff; 
    text-decoration:none; 
} 

.quicklinks a{ 
    color: #ffffff; 
    text-decoration:none; 
    float: right; 
} 

.quicklinks a:visted{ 
    color: #ffffff; 
    text-decoration:none; 
    float: right; 
} 

.quicklinks a:hover{ 
    color: #ffffff; 
    text-decoration:none; 
    float: right; 
} 

.quicklinks a:active{ 
    color: #ffffff; 
    text-decoration:none; 
    float: right; 
} 

Answer 1

簡單的答案應該只是花車權所需

.element{ 
    float: right; 
}