Css 三排两排<;li>;-如何使每行顶部对齐

Css 三排两排<;li>;-如何使每行顶部对齐,css,css-float,alignment,html-lists,Css,Css Float,Alignment,Html Lists,我在一个网站上有一个菜单区,它由两行组成,每行有三个项目。我通过使用float:left成功地使顶行顶部对齐,但不确定如何将底行顶部对齐。有什么办法可以做到这一点吗?非常感谢您的任何建议 <div id="services"> <div class="banner-image"> <img src="img/large.jpg" alt="BodywoRx room" /> </div><!-- end banner-

我在一个网站上有一个菜单区,它由两行组成,每行有三个项目。我通过使用
float:left
成功地使顶行顶部对齐,但不确定如何将底行顶部对齐。有什么办法可以做到这一点吗?非常感谢您的任何建议

<div id="services">
    <div class="banner-image">
    <img src="img/large.jpg" alt="BodywoRx room" />
    </div><!-- end banner-image -->
    <h2>We have a massage that fits YOU.</h2>
    <div id="service-list">
    <div class="service">
        <h3>Coffee Break $25:</h3><p>15 minute chair massage that focuses on the shoulders, neck, arms, wrists and hands.</p>
    </div>
    <div class="service">
        <h3>Lunch Break $40:</h3><p>30 minute table massage that focuses on the shoulders, neck, and lower back.</p>
    </div>
    <div class="service">
        <h3>Lympathic Drainage $50:</h3><p>Session provides congestion relief for the face, throat, and chest.</p>
    </div>
    <div class="service">
            <h3>Bliss $60:</h3><p>60 minute full body massage using light to medium pressure.</p>
    </div>
    <div class="service">
        <h3>Deep Tissue $80:</h3><p>60 minute full body massage using deep pressure.</p>
    </div>
    <div class="service">
        <h3>Correction $95:</h3><p>Session focuses on centering the body and finding and relieving dysfunction that is causing chronic pain and discomfort.</p>
    </div>
    </div><!-- end service-list -->



#services {
    width: 960px;
}

#services .banner-image {
    margin-top: 100px;
    padding-bottom: 40px;
}

#services h2 {
    font-size: 30px;
    padding-bottom: 20px;
}

#services #service-list {
    margin-left: 40px;
}

.service {
    display: inline-block;
    float: left;
    padding-right: 40px;
    width: 265px;
}

我们有适合你的按摩。
咖啡休息时间25美元:15分钟的椅子按摩,重点是肩部、颈部、手臂、手腕和手部

午餐时间40美元:30分钟的桌上按摩,重点是肩部、颈部和下背部

淋巴引流50美元:疗程可缓解面部、喉咙和胸部的充血

Bliss$60:60分钟轻压至中压全身按摩

深部组织80美元:60分钟深部按压全身按摩

校正$95:课程重点关注身体中心,发现并缓解导致慢性疼痛和不适的功能障碍

#服务{ 宽度:960px; } #服务。横幅图像{ 边缘顶部:100px; 填充底部:40px; } #服务h2{ 字体大小:30px; 垫底:20px; } #服务#服务清单{ 左边距:40px; } .服务{ 显示:内联块; 浮动:左; 右边填充:40px; 宽度:265px; }
如果“顶部对齐”是指保持第二行从同一位置垂直开始(即顶部都对齐),只需添加高度:100px到您的
.service
样式

是否尝试在一行中包含6项?你说的
  • 在哪里?你想要两行
    .service
    项目,每行有3个
    .service
    项目?您需要将
    .service
    项中的文本顶部对齐吗?尝试使用
    .service{vertical align:top;}
    in@zen,你说得对,我复制/粘贴了我使用的旧代码。我来换。很抱歉。