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

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 ="pull-right"应用于 #search-bar

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

或者css如果您没有包含Bootstrap,则在您的文件中定义此类

.pull-right {
    float: right;
}