html - 向右发送元素

Question

如何使用户和搜索栏在右侧垂直对齐？

#search {
    float: right;
    margin-top: 9px;
    width: 250px;
}

.search {
    width: 230px;
    height: 30px;
    position: relative;
    line-height: 22px;
    display: flex;
}

.search button {
    margin: 0;
    background-color: transparent;
    border: 0;
}

.search button span {
    font-size: 1.2rem;
    color: #fff;
}

.search input {
    box-sizing: border-box;
    width: 0;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
    line-height: 18px;
    padding: 0;
    border: 0;
    margin-left: 180px;
    visibility: hidden;
}

.search:hover input,
.search input:focus {
    width: 180px;
    margin-left: 0px;
    padding: 0 2px 0 2px;
    border: 2px inset;
    border-radius: 3px !important;
    visibility: visible;
}
.search button span:hover, .search button:hover {
    background-color: transparent;
}
.topbar-user img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 15px;
}
.user-menu {
    color: #fff;
    cursor: pointer;
    margin-left: 15px;
    margin-right: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav id="top-menu" class="navbar bg-primary-gradient col-lg-12 col-12 p-0 fixed-top navbar-inverse d-flex flex-row">
 
    <div class="navbar-menu-wrapper d-flex align-items-center">
        <button id="menuToggler" class="navbar-toggler navbar-toggler hidden-md-down align-self-center mr-3"
                type="button" data-toggle="minimize">
            <span id="navbar-icon" class="fa fa-arrow-left"></span>
        </button>
        <ul class="navbar-nav ml-lg-auto d-flex align-items-center flex-row">
        </ul>
        <div class="text-right">
            <div class="search">
                <input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search"/>
                <button type="submit" class="btn btn-primary btn-sm"><span class="fa fa-search">Search</span></button>
            </div>
            <div class="dropdown user-menu">
                <a class="dropdown-toggle topbar-user" id="navbar-user" data-toggle="dropdown">
                   <span>USER</span>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-user">
                    <a class="dropdown-item" href="#"><span class="fa fa-user"></span> Profile</a>
                    <a class="dropdown-item" href="settings"><span class="fa fa-cog"></span> Settings</a>
                    <a class="dropdown-item" href="#"><span class="fa fa-question"></span> Help</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" onclick="logout()"><span class="fa fa-sign-out"></span> Sign out</a>
                </div>
            </div>
        </div>
    </div>
</nav>

Answer 1

使用类将元素向左或向右浮动。包含 !important 是为了避免特异性问题。类也可以用作混入。

<div class="pull-left">...</div>
<div class="pull-right">...</div>

不适用于导航栏要将导航栏中的组件与实用程序类对齐，请改用 .navbar-left 或 .navbar-right。有关详细信息，请参阅导航栏文档。 here

#search {
    float: right;
    margin-top: 9px;
    width: 250px;
}

.search {
    width: 230px;
    height: 30px;
    position: relative;
    line-height: 22px;
    display: flex;
}

.search button {
    margin: 0;
    background-color: transparent;
    border: 0;
}

.search button span {
    font-size: 1.2rem;
    color: #fff;
}

.search input {
    box-sizing: border-box;
    width: 0;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
    line-height: 18px;
    padding: 0;
    border: 0;
    margin-left: 180px;
    visibility: hidden;
}

.search:hover input,
.search input:focus {
    width: 180px;
    margin-left: 0px;
    padding: 0 2px 0 2px;
    border: 2px inset;
    border-radius: 3px !important;
    visibility: visible;
}
.search button span:hover, .search button:hover {
    background-color: transparent;
}
.topbar-user img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 15px;
}
.user-menu {
    color: #fff;
    cursor: pointer;
    margin-left: 15px;
    margin-right: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav id="top-menu" class="navbar bg-primary-gradient col-lg-12 col-12 p-0 fixed-top navbar-inverse d-flex flex-row">
 
    <div class="navbar-menu-wrapper d-flex align-items-center">
        <button id="menuToggler" class="navbar-toggler navbar-toggler hidden-md-down align-self-center mr-3"
                type="button" data-toggle="minimize">
            <span id="navbar-icon" class="fa fa-arrow-left"></span>
        </button>
        <ul class="navbar-nav ml-lg-auto d-flex align-items-center flex-row">
        </ul>
        <div class="text-right pull-right">
            <div class="search">
                <input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search"/>
                <button type="submit" class="btn btn-primary btn-sm"><span class="fa fa-search">Search</span></button>
            </div>
            <div class="dropdown user-menu">
                <a class="dropdown-toggle pull-right topbar-user" id="navbar-user" data-toggle="dropdown">
                   <span>USER</span>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-user">
                    <a class="dropdown-item" href="#"><span class="fa fa-user"></span> Profile</a>
                    <a class="dropdown-item" href="settings"><span class="fa fa-cog"></span> Settings</a>
                    <a class="dropdown-item" href="#"><span class="fa fa-question"></span> Help</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" onclick="logout()"><span class="fa fa-sign-out"></span> Sign out</a>
                </div>
            </div>
        </div>
    </div>
</nav>