2013-08-21 167 views
1

我想讓頁面頂部的灰色按鈕全部適合頂部(與本體一致),而不是兩行:http://www.nbm.org/test/nbm-online-drafts/dropdown-testing.html刪除HTML/CSS中的一個元素的右邊距導航

我把它設置爲一個列表:

<nav id="main-nav"> 
<ul id="nav-primary"> 
<li><a href="http://www.nbm.org/plan-visit/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/planyourvisit.jpg" alt="Plan Your Visit" width="109" height="48"></a> 
     <ul class="subnav"> 
      <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=2041&JServSessionIdr004=gkto4vnlz1.app213a" style="padding-top: 12px; padding-bottom:12px;">Buy Tickets</a> 
      </li> 
      <li><a href="http://www.nbm.org/plan-visit/hours_amenities/">Hours & Admission</a> 
      </li> 
      <li><a href="http://www.nbm.org/plan-visit/accessibility-directions/">Accessibility & Directions</a> 
      </li> 
      <li><a href="http://www.nbm.org/programs-lectures/tours/" style="padding-top: 12px; padding-bottom:12px;">Tours</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="http://www.nbm.org/exhibitions-collections/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/exhibitionscollections.jpg" alt="Exhibitions/Collections" width="109" height="48"></a> 

     <ul class="subnav"> 
      <li><a href="http://www.nbm.org/exhibitions-collections/current-exhibitions.html">Current Exhibitions</a> 
      </li> 
      <li><a href="http://www.nbm.org/exhibitions-collections/upcoming-exhibitions.html">Upcoming Exhibitions</a> 
      </li> 
      <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=2041&JServSessionIdr004=gkto4vnlz1.app213a" style="padding-top: 12px; padding-bottom:12px;">Buy Tickets</a> 
      </li> 
      <li><a href="http://www.nbm.org/exhibitions-collections/collections/" style="padding-top: 12px; padding-bottom:12px;">Collections</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="http://www.nbm.org/programs-lectures/"><img src=" http://www.nbm.org/assets/images/homepage/2011/nav-sprites/adultprogs.jpg" alt="Adult Programs" width="109" height="48"></a> 

     <ul class="subnav"> 
      <li><a href="http://go.nbm.org/site/Calendar/1810746008?view=MonthGrid&Day">Upcoming Programs</a> 
      </li> 
      <li><a href="http://www.nbm.org/programs-lectures/series/spotlight-on-design-1.html">Spotlight on Design</a> 
      </li> 
      <li><a href="http://www.nbm.org/about-us/multimedia/" style="padding-top: 12px; padding-bottom:12px;">Watch/Listen</a> 
      </li> 
      <li><a href="http://www.nbm.org/programs-lectures/continuing-education-credits.html">Continuing Education Credits</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="http://www.nbm.org/families-kids/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/familiesteens.jpg" alt="Families/Teens" width="109" height="48"></a> 

     <ul class="subnav"> 
      <li><a href="http://www.nbm.org/families-kids/festivals/" style="padding-top: 12px; padding-bottom:12px;">Festivals</a> 
      </li> 
      <li><a href="http://www.nbm.org/families-kids/everyday-activities/">Everyday Activities</a> 
      </li> 
      <li><a href="http://www.nbm.org/families-kids/teens-young-adults/">Teens & Young Adults</a> 
      </li> 
      <li><a href="http://www.nbm.org/families-kids/summer-camp.html" style="padding-top: 12px; padding-bottom:12px;">Summer Camp</a> 
      </li> 
      <li><a href="http://www.nbm.org/families-kids/scouts-and-youth-groups/">Scouts & Youth Groups</a> 
      </li> 
      <li><a href="http://www.nbm.org/families-kids/birthday-parties/" style="padding-top: 12px; padding-bottom:12px;">Birthday Parties</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="http://www.nbm.org/schools-educators/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/schoolseducators.jpg" alt="Schools/Educators" width="109" height="48"></a> 

     <ul class="subnav"> 
      <li><a href="http://www.nbm.org/schools-educators/educators/" style="padding-top: 12px; padding-bottom:12px;">For Educators</a> 
      </li> 
      <li><a href="http://www.nbm.org/families-kids/teens-young-adults/">For Teens & Young Adults</a> 
      </li> 
      <li><a href="http://www.nbm.org/schools-educators/school-visit/" style="padding-top: 12px; padding-bottom:12px;">Plan a School Visit</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="http://www.nbm.org/support-us/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/joindonate.jpg" alt="Join/Donate" width="109" height="48"></a> 

     <ul class="subnav"> 
      <li><a href="https://secure2.convio.net/nbm/site/Donation2?df_id=2420&2420.donation=form1&JServSessionIdr004=gkto4vnlz1.app213a" style="padding-top: 12px; padding-bottom:12px;">Donate Now</a> 
      </li> 
      <li><a href="http://www.nbm.org/support-us/membership/" style="padding-top: 12px; padding-bottom:12px;">Membership</a> 
      </li> 
      <li><a href="http://www.nbm.org/support-us/sponsorships/" style="padding-top: 12px; padding-bottom:12px;">Corporate Giving</a> 
      </li> 
      <li><a href="http://www.nbm.org/support-us/awards_honors/" style="padding-top: 12px; padding-bottom:12px;">Awards & Honors</a> 
      </li> 
      <li><a href="http://www.nbm.org/support-us/volunteer/" style="padding-top: 12px; padding-bottom:12px;">Volunteer</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/shop.jpg" alt="Shop" width="109" height="48"></a> 

     <ul class="subnav"> 
      <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=1035&TYPE=&NAME=" style="padding-top: 12px; padding-bottom:12px;">Books</a> 
      </li> 
      <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=1036&TYPE=&NAME=" style="padding-top: 12px; padding-bottom:12px;">Home</a> 
      </li> 
      <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=1033&TYPE=&NAME=" style="padding-top: 12px; padding-bottom:12px;">Toys</a> 
      </li> 
      <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=1034&TYPE=&NAME=" style="padding-top: 12px; padding-bottom:12px;">Museum</a> 
      </li> 
      <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=2060&TYPE=&NAME=" style="padding-top: 12px; padding-bottom:12px;">Stationery</a> 
      </li> 
      <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=1040&TYPE=&NAME=" style="padding-top: 12px; padding-bottom:12px;">Fashion</a> 
      </li> 
      <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=2070&TYPE=&NAME=" style="padding-top: 12px; padding-bottom:12px;">Design</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="http://www.nbm.org/about-us/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/aboutus.jpg" alt="About Us" width="109" height="48"></a> 

     <ul class="subnav"> 
      <li><a href="http://www.nbm.org/about-us/about-the-museum/">About the Museum</a> 
      </li> 
      <li><a href="http://www.nbm.org/about-us/national-building-museum-online/" style="padding-top: 12px; padding-bottom:12px;">E-newsletters</a> 
      </li> 
      <li><a href="http://www.nbm.org/about-us/press-room/" style="padding-top: 12px; padding-bottom:12px;">Press Room</a> 
      </li> 
      <li><a href="http://www.nbm.org/about-us/management-staff/">Staff & Governance</a> 
      </li> 
      <li><a href="http://www.nbm.org/about-us/employment_internships/">Employment & Internships</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

我想保留李右頁邊距爲4像素,而是推動「關於我們」按鈕,第二行。將li右邊距更改爲3px太小,並且按鈕與右側的主體不匹配。

CSS:

#main-nav { 
    background: none repeat scroll 0 0 white; 
    height: 53px; 
    left: 0; 
    position: relative; 
    top: 128px; 
    width: 100%; 
    z-index: 11; 
} 
#main-nav .subnav { 
    background: none repeat scroll 0 0 #D7D6D4; 
    border: 0 solid #D4D5D6; 
    display: none; 
    left: 0; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 49px; 
    width: 109px; 
    z-index: 11; 
} 
#main-nav .subnav li { 
    border-bottom: 1px solid #EEEEEE; 
    display: block; 
    margin: 0; 
} 
#main-nav .subnav li a { 
    color: #000000; 
    font-size: 11px; 
    height: 18px; 
    padding: 6px 4px 19px; 
    width: 101px; 
} 
#main-nav .subnav li a:hover { 
    background: none repeat scroll 0 0 #BFBEBA; 
    width: 101px; 
} 
#nav-primary { 
    float: left; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
#nav-primary li { 
    float: left; 
    margin-right: 4px; 
    position: relative; 
} 
#nav-primary li a { 
    color: #000000; 
    float: left; 
    font-size: 13px; 
    font-weight: bold; 
    height: 48px; 
    line-height: 16px; 
    text-align: center; 
    text-decoration: none; 
    width: 109px; 
} 
#nav-primary li a:hover { 
    text-decoration: none; 
} 
#nav-primary li:hover .subnav { 
    display: block; 
} 

是否可以刪除最後一個li元素的右邊緣?或隱藏它? 任何想法非常感謝!

+0

或者,也許你可以把它漂浮到正確的? – Sebastien

回答

4

正是這種簡單:

#nav-primary > li:last-child 
{ 
    margin-right:0; 
} 
+0

哦!是的,它做到了。謝謝!!! – hwiencek

相關問題