如何使搜索输入下方的结果div浮动而不增加菜单高度？

Question

我有一个搜索表单：

<nav>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
        <li>
            <form>
                <input type='text' name='search' class='search'/>
                <input type='submit' value='Go' />
            </form>
        </li>
    </ul>
</nav>
<div class='results'></div>

Jquery：

 var inputWidth = $('.search').width();
 $('.results').css('width' , inputWidth);

带有div类的results将包含来自数据库的结果，我希望这个div不在具有相同宽度的搜索输入下方的导航菜单中。

Answer 1

我不明白为什么你使用jQuery设置宽度..你不能只使用CSS并将search和results设置为相同的宽度？

如果你出于某种原因必须使用jQuery，也许试试这个，看起来你错过了px末尾的.css()：

 var inputWidth = $('.search').width();
 $('.results').css('width', inputWidth + 'px');

希望这可以帮助。

Answer 2

我认为你的工作没有任何问题。检查这个以获取更多细节。

var inputWidth = $('.search').width();
$('.results').css('width' , inputWidth);

ul {
  padding: 0;
}

input {
	background: red;
  border: 0;
}
.results {
	background: red;
	margin-top: 5px;
  padding: 5px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
        <li>
            <form>
                <input type="text" name="search" class="search"/>
                <input type="submit" value="Go" />
            </form>
        </li>
    </ul>
</nav>
<div class="results">Some Search Result..</div>