Question

我一直在努力解决个人网页上的标题问题。目前，它看起来像这样：

正如你所看到的，左边有一个带“ZH”的简单段落。然后，我在徽标的右侧直接有三个列表项。我想要做的是让三个列表项向右浮动，有点像这样：

以下是当前生成的HTML：

<ul class="nav">
        <a class="navbar-brand" href="http://localhost:8888/wordpress/">
            <p>ZH</p>
        </a>
        <li class="nav-item">
            <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/about/" role="button">About</a>
        </li>
        <li class="nav-item">
            <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/projects/" role="button">Projects</a>
        </li>
        <li class="nav-item">
            <a class="btn btn-lg nav-link" target="_blank" href="http://localhost:8888/wordpress/wp-content/themes/zachary_hughes_wordpress/assets/hughes_zachary_cv.pdf" role="button">Resume</a>
        </li>
</ul>

以下是ul.nav的当前CSS：

.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

无论如何都可以在不更改html标记的情况下执行此操作吗？任何帮助将不胜感激。

Answer 1

您可以使用justify-content: space-between上的.nav执行此操作，如果您打包li以创建两个 flex-items ，然后将其放置为他们可以相互远离：

ul {
  list-style: none;
}

.nav {
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between; /* horizontal alignment / places first flex-item (child) far left and last far right, i.e. max. space between them */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.flex-container {
  display: flex;
}

.flex-container > li {
  margin: 0 5px; /* adjust */
}

<div class="nav">
  <a class="navbar-brand" href="http://localhost:8888/wordpress/">
    <p>ZH</p>
  </a>
  <ul class="flex-container">
    <li class="nav-item">
      <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/about/" role="button">About</a>
    </li>
    <li class="nav-item">
      <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/projects/" role="button">Projects</a>
    </li>
    <li class="nav-item">
      <a class="btn btn-lg nav-link" target="_blank" href="http://localhost:8888/wordpress/wp-content/themes/zachary_hughes_wordpress/assets/hughes_zachary_cv.pdf" role="button">Resume</a>
    </li>
  </ul>
</div>

我使用ul元素包装li和外部flex-container的div。

Answer 2

这一切都可以单独使用本机Bootstrap类而不用任何自定义CSS 。这就是Bootstrap 4的魅力。

在这种特殊情况下，您只需要将ml-auto类添加到ul。而已！

但是，代码的其他部分也存在问题。不使用Bootstrap 4提供的结构和元素会强制您使用自定义css。这使得使用Bootstrap在我看来毫无意义。 Bootstrap 4的优点在于，您几乎可以做任何事情而无需接触CSS！

我已经重写了你的代码，以提供一个干净而优雅的解决方案，它只使用Bootstrap 4类而且没有自定义css。例如，班级m-0会删除您品牌上不需要的保证金。如果你确实想要一个保证金，只需将0更改为1或2.对于仅水平边距，使用mx-1作为垂直边距my-1等。

这是我承诺的优雅代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
       <a class="navbar-brand" href="http://localhost:8888/wordpress/">
           <p class="m-0">ZH</p>
       </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 ml-auto">
               <li class="nav-item">
                   <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/about/" role="button">About</a>
               </li>
               <li class="nav-item">
                   <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/projects/" role="button">Projects</a>
               </li>
               <li class="nav-item">
                   <a class="btn btn-lg nav-link" target="_blank" href="http://localhost:8888/wordpress/wp-content/themes/zachary_hughes_wordpress/assets/hughes_zachary_cv.pdf" role="button">Resume</a>
               </li>
           </ul>
       </div>
   </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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

Answer 3

这是flex和justify-content引用此网站flexBox

的简单示例

＆＃13;

<html>
    <head>
    <title>My Favorite Films</title>
	<style>
		#header{
			display: flex;
			justify-content: flex-end;
      background-color: pink;
		}
				
		h1{
			width: 125px;
			display: flex;
			background-color: antiquewhite;
		}	
	</style>
    </head>

    <body>
        <div id="container">
            <div id="header">
                <h1 class="home-page-header">My Favorite Films</h1>
            </div>
        </div>
    </body>
</html>

＆＃13;

将第一个列表项浮动到左侧，将剩余的列表项浮动到右侧（使用flexbox）

3 个答案: