Question

我目前在标题中有导航栏元素。我想要的只是让他们移动到屏幕的右侧，因为它们现在位于左侧。有谁知道他们为什么不动？定位元素也有一些规则吗？我认为这就像告诉他们我希望他们去哪里一样简单，但显然事实并非如此。

HTML：

if(cv::waitKey(1) == 'p')
    while(cv::waitKey(1) != 'p');

CSS：

<div class="row">
        <div class="col">
    <!--Navigation bar-->
            <header class="container-fluid">

                <nav class="nav navbar-expand-sm">
                        <!--Search form-->
                    <div class="searchForm">
                        <form class="form-inline" action="">
                            <input type="text" name="search" class="form-control mr-sm-2" placeholder="Search">
                        </form>
                    </div>
                    <!--Navigation bar links-->
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="#" class="nav-link bold">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link bold">Register</a>
                        </li>
                        <li class="nav-item dropdown">
                                <a href="#" class="nav-link dropdown-toggle bold" id="navbardrop" data-toggle="dropdown">Login</a>
                                <!--Login dropdown form-->
                            <div class="dropdown-menu dropdown-menu-right">
                                <h3 class="dropdown-header">Log In</h3>
                                <form action="">
                                    <div class="form-group loginInput">
                                        <input type="email" name="email" id="email" class="form-control" placeholder="Email Address">
                                    </div>

                                    <div class="form-group loginInput">
                                        <input type="password" name="password" class="form-control" id="password" placeholder="Password">
                                    </div>
                                    <!--Login Buttton-->
                                    <button type="submit class=btn btn-primary">Log In</button>
                                </form>
                            </div>
                        </li>
                    </ul>
                </nav>
            </header>
        </div>
    </div>

Answer 1

您必须将效果应用于您希望它们移动的元素的父元素。

.nav{text-align:right;}

Answer 2

不是使用text-align: right;定位，而是执行此操作：position: relative; right: 5%; transform: translate(-50%);您可以根据需要更改“正确”值。您可以同时使用两者，但始终在父级中定义，在本例中为.nav{}。所以你可以用这个：

.nav{
position: relative;
right: 5%;
transform: translate(-50%);
}

或者这个：

.nav{
text-align: right;
}

如果您放置图像并且响应能力第一个更好:)

Answer 3

我找到的答案是在导航栏上使用ml-auto。

HTML：

<nav class="nav navbar-expand-sm">
             <!--Search form-->
            <div class="searchForm">
                <form class="form-inline" action="">
                    <input type="text" name="search" class="form-control mr-sm-2" placeholder="Search">
                </form>
            </div>
            <!--Navigation bar links-->
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#" class="nav-link bold">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link bold">Register</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle bold" id="navbardrop" data-toggle="dropdown">Login</a>
                        <!--Login dropdown form-->
                    <div class="dropdown-menu dropdown-menu-right">
                        <h3 class="dropdown-header">Log In</h3>
                        <form action="">
                            <div class="form-group loginInput">
                                <input type="email" name="email" id="email" class="form-control" placeholder="Email Address">
                            </div>

                            <div class="form-group loginInput">
                                <input type="password" name="password" class="form-control" id="password" placeholder="Password">
                            </div>
                            <!--Login Buttton-->
                            <button type="submit class=btn btn-primary">Log In</button>
                        </form>
                    </div>
                </li>
            </ul>
        </nav>

Answer 4

要在右侧定位元素，您需要将其添加到课程CSS的{{1}}代码中：

navbar-nav

注意：您的.navbar-nav { position:relative; // positioning relative to parent float:right; // float right inside it's parent list-style-type:none; // this is to remove the list dots (bullets) background:#2A2A36; }及其<form>有container div。如果您不希望在0px height中的<br style="clear:both;" />标记之后添加</form>。虽然我在<div class="searchForm">中看到height:0，但可能是故意的。

以下是代码：

＆＃13;

CSS

＆＃13;

body{
    background: #ecf0f1;
    font-family: 'Open Sans', sans-serif;
}
header{
    background-color: #2A2A36;

}
.bold{
    font-weight: bold;
}
.loginInput input{
    margin: 0 auto;
    width: 150px
}

.dropdown-menu{
    width: 200px;
    height: 220px;
    background:#1F2021;
    opacity: 0.9;
}
.navbar-nav .nav-link{
    color: #ecf0f1;
    text-align: right;
}
.navbar-nav .nav-link:hover{
    background:#d35400; 
}
form{
    margin: 0 auto;
}
.searchForm form{
    height: 0px;
    display: block;
}

*{
    padding: 0;
    margin: 0;
}
.navbar-nav .nav-item{
    border-right: 1px solid #FFF;
}

.navbar-nav
{
  position:relative;
  float:right;
  list-style-type:none;
  background:#2A2A36;
}

＆＃13;

标题元素没有在css中定位

4 个答案: