Question

我正在尝试实施一个网站http://www.2chainz.com/的外观我还在第一步，做导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--facebook icon-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style type="text/css">
.navbarleft{
    width: 40%;

}
.navbarmiddle{
    font-size: 2rem;
    margin: 0 auto;
    width: 20%;
    text-align: center;
}
.navbarright{
    width: 40%;
    float: right;
}
.navbar-nav{
    padding-left: auto !important;
}
.fa{
    float: right;
}
.navbar{
    height: 10vh;
}
.middleitem{
    margin: 0 auto;
}
</style>

</head>
<body>
<nav class="navbar navbar-default navbar-static-top navbar-expand-lg navbar-light">
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav navbarleft">
      <li class="nav-item">
        <a class="nav-link" href="#">NEWS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">MUSIC</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">VIDEO</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">PHOTOS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">STORE</a>
      </li>
    </ul>
    <ul class = "navbar-nav navbarmiddle" style="margin: 0 auto; text-align: center;">
        <span class="middleitem">2 CHAINZ</span>
    </ul>

    <ul class = "navbar-nav navbarright navbar-right" style="float: right;">
        <li class="nav-item">
        <a href=# class="fa fa-facebook"></a>
        </li>

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


</body></html>

我有两个问题，第一个是2 CHAINZ在其父ul中的位置。我希望它在ul元素的中间。我尝试使用margin: 0 auto;和text-align: center;，但他们不工作，总是留在左边。

第二个是我试图将facebook图标向右移动，我将float: right;放在那里，但它仍然无法正常工作。你能救我吗？谢谢！

另外，我试图将它放在jsfiddle http://jsfiddle.net/raua0Lku/中，但它无法显示导航栏。但它适用于我的笔记本电脑镀铬。这是为什么......

更新：我只是做了一些改动，让2 CHAINZ在中间，但我仍然没有弄清楚如何在右边制作facebook图标..

Answer 1

试试吧;

<ul class = "navbar-nav navbarmiddle" style="margin: 0 auto; text-align: center;">
        2 CHAINZ
    </ul>

<ul class = "navbar-nav navbarright" style="float: right;">
        <a href=# class="fa fa-facebook"></a>
    </ul>

最后，如果你更改css文件，你的网站刷新ctrl + f5。可能存在与缓存相关的问题。

Answer 2

这里是一个干净的解决方案，不需要任何CSS攻击，只能使用本机Bootstrap 4类（单击＆＃34;运行代码片段＆＃34;按钮并展开到完整窗口进行检查）：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

    <a class="navbar-brand d-block d-lg-none" href="#">2 CHAINZ</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">NEWS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">MUSIC</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">VIDEO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">PHOTOS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">STORE</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>

        <a class="navbar-brand d-none d-lg-block" href="#">2 CHAINZ</a>

        <a href=# class="btn btn-outline-info fa fa-facebook ml-auto"></a>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

＆＃13;

注意第一个2 CHAINZ元素如何具有类d-block d-lg-none，使其出现在较小的屏幕上，但在大（lg）屏幕上消失。

位于中间的另一个2 CHAINZ元素仅出现在大（lg）屏幕上，但在较小的屏幕上消失。

图标上的ml-auto类（margin-left：auto）将2 CHAINZ元素推向中间，始终保持居中。

在我的案例中如何控制父母中元素的位置？

2 个答案: