Question

我是一个顶级的固定引导导航栏，左边有一个品牌，右侧有一个组合框和一个导航栏形式。但问题是正确的内容溢出在每个上面其他。我希望他们紧挨着彼此。首先应该首先是组合框，然后是形式。这是截图：

以下是编码：

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="Brand" src="img/nice.png" width="100" height="100">
                </a>
            </div>
            <div class="links navbar-right">
                <!-- Split button -->
                <div class="btn-group">
                <button type="button" class="btn btn-default">Action</button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
                </div>
                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </nav>

CSS：

.navbar-header .navbar-brand {
    float: left;
    height: 50px;
    padding: 10px 15px;
    font-size: 18px;
    line-height: 20px;
}

提前谢谢！

Answer 1

这样做：

元素form默认设置为block，表示默认会扩展所有空间，设置`inline-block它只会扩展元素

.navbar-form{
  display:inline-block;
}

<强> DEMO

navbar-right内容并排

1 个答案: