为什么中间的line没有跟着浮动?

来源:4-3 menu

慕妹0475077

2018-11-17 13:22

https://img4.mukewang.com/5befa55500014cdc12190466.jpg


<div class="public-container menu-list">
    <ul class="clearfloat">
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Voluptate cillum fugiat.</h4>
                <p class="comment">Cheese, tomato, mushrooms, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$50</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Arcu pede enim justo.</h4>
                <p class="comment">Tuna, Sweetcorn, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$45</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Metus varius laoreet.</h4>
                <p class="comment">Chicken, mozzarella cheese, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$62</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Cras dapibussemper nisi.</h4>
                <p class="comment">Pineapple, Minced Beef, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$32</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Donec sodales magna.</h4>
                <p class="comment">Tuna, Sweetcorn, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$25</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Quam semper libero.</h4>
                <p class="comment">Cheese, tomato, mushrooms, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$15</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Saugue velit cursus.</h4>
                <p class="comment">Pineapple, Minced Beef, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$30</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Nam eget dui Etiam.</h4>
                <p class="comment">Chicken, mozzarella cheese, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$35</div>
        </li>
    </ul>
</div>
.index-menu .menu-list{
    margin-top:150px;
    color:#555;
    overflow:hidden;
}

.index-menu .menu-list ul{
    width:1160px;
}

.index-menu .menu-item{
    float:left;
    width:520px;
    margin-right:60px;
    margin-bottom:56px;
}

.index-menu .menu-item .title, .index-menu .menu-item .line{
    float:left;
}

.index-menu .menu-item .price{
    float:right;
}

.index-menu .menu-item .title{
    width:230px;
    color:#555;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.index-menu .menu-item .comment{
    margin-top:4px;
    color:#b7b7b7;
    font-size:12px;
}

.index-menu .menu-item .line{
    margin-top:10px;
    width:192px;
    border-top:1px solid #e3e1e1;
}


写回答 关注

1回答

  • 风先羽
    2019-01-02 16:29:27

    很简单啊老哥,你的a标签是块级元素

    qq_童闪闪...

    那给了“line" display: inline-block;还是不行呢,一定要给a 元素呢

    2019-07-15 19:48:53

    共 1 条回复 >

从 psd 到 html

教你把PSD设计稿转化成HTML,用案例来讲解基本流程

105471 学习 · 410 问题

查看课程

相似问题