html - 如何让行内 block 占据整行？

Question

我正在构建一个菜单，其中每个下拉项都具有其内容的宽度。为了解决这个问题，我必须将这些元素制作成内联 block ，但这意味着它们最终都在同一行上。有没有办法在不使用边距的情况下让它们都在一行上，或者有没有办法让 block 具有其内容的宽度？

谢谢

示例菜单项 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:

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

Demo