Question

我正在使用HTML编写网页，我正在尝试弄清楚如何将搜索栏对齐到导航栏的右侧。下面是我用于导航栏的HTML，以及CSS代码。

HTML：

<div class="naviagion">
        <div class="col-md-10 col-md-offset-1" id="test">
            <ul class="nav nav-pills">
                <li class="page-title"><a href="index.html"><h4>Josh's Blog</h4></a></li>
                <li class="active"><a href="index.html">Home</a></li>
                <li class="menu-item"><a href="source/posts.html">Blog Posts</a></li>
                <li class="menu-item"><a href="source/projects.html">Projects</a></li>
                <li class="menu-item"><a href="source/about.html">About</a></li>
                <li class="menu-item"><a href="source/contact.html">Contact</a></li>
                <!-- Search Bar -->
                <li id="search-bar" align="right">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                    </form>
                </li>


            </ul><br>
        </div>
    </div>

CSS：

    #search-bar {
    margin-top: 19px;
}

.page-title {
    padding-right: 50px;
    margin-top: 17px;
}

.menu-item {
    margin-top: 25px;
}

#test {
    background-color: #f1f1f1;
}

.active {
    margin-top: 25px;
}

/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}

/* Set gray background color and 100% height */
.sidenav {
  background-color: #f1f1f1;
  width: 100%;
}

/* Set black background color, white text and some padding */
footer {
  background-color: #555;
  color: white;
  padding: 15px;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }
  .row.content {height: auto;} 
}

Answer 1

您好像使用Bootstrap

应用class =＆＃34; pull-right＆＃34;到#search-bar

<li id="search-bar" class="pull-right">
...
</li>

或者，如果您没有包含Bootstrap，请在css文件中定义此课程

.pull-right {
    float: right;
}

Answer 2

在css中，将此项提供给作为搜索栏的主要包装div的类。

while(current != null){...}

HTML导航栏如何将搜索栏与屏幕右侧对齐

2 个答案: