Question

我正在构建一个菜单，其中每个下拉项都有其内容的宽度。为了管理我必须使项目内联块，但这意味着它们最终都在同一行。有没有办法在不使用边距的情况下将它们全部放在线上，或者有没有办法让块具有其内容的宽度？

由于

示例菜单项HTML：

    <div class="menuItemWrap">
        <a href="#" class="menuItemHead">resources</a>
        <div class="menuItemContentWrap">
        <a href="#" class="menuItemContentItem">articles</a>
        <a href="#" class="menuItemContentItem">web reviews</a>
        <a href="#" class="menuItemContentItem">bookstore</a>
        <a href="#" class="menuItemContentItem">powerpoint</a>
        <a href="#" class="menuItemContentItem">schwab forms</a>
        <a href="#" class="menuItemContentItem">blunck forms</a>


        </div>    

    </div>

CSS：

.menuItemWrap{
    display:inline-block;
    float:left;
}

.menuItemHead{
    padding:14px 22px;
    margin: 0px;
    border:0px;
    background:#2389DD; 
}

.menuItemContentWrap{
    position:absolute;
    display:none;
    width:100px;
    background:#A6CFD1;
}

.menuItemContentItem{
    display:block;
    padding: 8px 14px;
    background: red;
    color:#333;
    position:relative;
    float:left;
}

Answer 1

float删除元素的宽度和高度。为了使元素出现在单独的行中，请使用clear属性：

float: left;
clear: left;

来自MDN的报价：

clear CSS属性指定元素是否可以在旁边在它之前的浮动元素或必须向下移动（清除）在他们之下。

Demo

如何让内联块占用整条线？

1 个答案: