从HTML / CSS列表导航中的一个元素中删除右边距

时间:2013-08-21 20:10:18

标签: html css html-lists

我试图让这个页面顶部的灰色按钮全部适合顶部(与身体对齐),而不是两行:http://www.nbm.org/test/nbm-online-drafts/dropdown-testing.html

我将它设置为列表:

<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>

   

我希望将右边距保持在4px,但是将“关于我们”按钮推到第二行。将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元素的右边距?还是隐藏它? 任何想法都非常感谢!

1 个答案:

答案 0 :(得分:4)

就是这么简单:

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