Question

我有一个垂直菜单。每个li都有一个<a>链接向左浮动，在同一行上我有另一个<a>向右浮动。它正确浮动，但我想第二个<a>是一个按钮，所以我尝试设置宽度/高度和背景颜色。当我设置宽度/高度时，它不起作用。我尝试过设置内联块，高度仍然占据了li的100％。 li高度设置为50px btw。谢谢，如果您需要其他信息，请询问。

HTML

<li class="search_items"> /* An li of the nav */
<form>
    <input type="search" placeholder="Search Items...">
</form>
<div class="results" style="display:none">
    <ul>
        <li>
            <a class='item_name' href='itemDetail.php'></a>
            <a class='item_category' href='categoryDetail.php'></a>
            <a class='addItem'>AddItem</a> /* addItem is an <a> that I style as a button */
        </li> 

    </ul>
</div>

CSS

div.navbar li.search_items input { /* Item search text input */
width: 500px;
height: 40px;
text-indent: 10px;
font-size: 20px;
top: 0;
padding: 0;
margin: 0;
outline: none;
border: none;
}

div.navbar li.search_items div.results {
background-color: white;
width: 500px;
position: absolute;
border: 1px solid rgb(200, 200, 200);
border-top: none;
max-height: 500px;
overflow: hidden;
}

div.navbar li.search_items div.results ul {
width: 100%;
margin: 0;
padding: 0;
}

div.navbar li.search_items div.results ul li {
background-color: white;
display: block;
width: 100%;
height: 50px;
color: rgb(150, 150, 150);
line-height: 50px;
position: relative;
}

div.navbar li.search_items div.results ul li a.item_name {
float: left;
}

div.navbar li.search_items div.results ul li a.item_category {
    float: left;
}

div.navbar li.search_items div.results ul li a.addItem{
display: inline-block;
float: right;
}

所有代码主要用于实时快速搜索。当用户键入时，文本框下方是产品的结果。

CSS |如何保持浮动使元素填充100％高度？

0 个答案: