如何在弹性行中右对齐文本

时间：2017-01-07 12:08:12

标签： css3 flexbox

我有以下HTML / CSS生成the top navigation bar of a website。

#navbarNavDropdown {
    align-content: flex-end;
}
#main-menu {
    width: 700px;
    float: right;
}
.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.navbar-collapse {
  display: flex !important;
  width: 100%;
}
.navbar-nav {
  flex-direction: row;
}
.menu-item {
    float: left;
    display: inline;
    width: auto;
}
.navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #292b2c;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

<div id="navbarNavDropdown" class="collapse navbar-collapse">
<ul id="main-menu" class="navbar-nav"><li class="menu-item menu-item-type-custom menu-item-object-custom nav-item menu-item-1636"><a title="Home" href="http://wpthemetestdata.wordpress.com/" class="nav-link">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1637"><a title="Blog" href="http://dev.doig.com.au/blog/" class="nav-link">Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1638"><a title="Front Page" href="http://dev.doig.com.au/front-page/" class="nav-link">Front Page</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1639 dropdown"><a title="About The Tests" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">About The Tests <span class="caret"></span></a>
<ul class=" dropdown-menu" role="menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1697"><a title="Page Image Alignment" href="http://dev.doig.com.au/about/page-image-alignment/" class="nav-link">Page Image Alignment</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1698"><a title="Page Markup And Formatting" href="http://dev.doig.com.au/about/page-markup-and-formatting/" class="nav-link">Page Markup And Formatting</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1640"><a title="Clearing Floats" href="http://dev.doig.com.au/about/clearing-floats/" class="nav-link">Clearing Floats</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1641"><a title="Page with comments" href="http://dev.doig.com.au/about/page-with-comments/" class="nav-link">Page with comments</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1642"><a title="Page with comments disabled" href="http://dev.doig.com.au/about/page-with-comments-disabled/" class="nav-link">Page with comments disabled</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1643 dropdown"><a title="Level 1" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Level 1 <span class="caret"></span></a>
<ul class=" dropdown-menu" role="menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1644 dropdown-submenu"><a title="Level 2" href="http://dev.doig.com.au/level-1/level-2/" class="nav-link">Level 2</a>
    <ul class=" dropdown-menu" role="menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1645"><a title="Level 3" href="http://dev.doig.com.au/level-1/level-2/level-3/" class="nav-link">Level 3</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1699"><a title="Level 3a" href="http://dev.doig.com.au/level-1/level-2/level-3a/" class="nav-link">Level 3a</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1700"><a title="Level 3b" href="http://dev.doig.com.au/level-1/level-2/level-3b/" class="nav-link">Level 3b</a></li>
    </ul>
</li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1701"><a title="Level 2a" href="http://dev.doig.com.au/level-1/level-2a/" class="nav-link">Level 2a</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1702"><a title="Level 2b" href="http://dev.doig.com.au/level-1/level-2b/" class="nav-link">Level 2b</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1646"><a title="Lorem Ipsum" href="http://dev.doig.com.au/lorem-ipsum/" class="nav-link">Lorem Ipsum</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1703"><a title="Page A" href="http://dev.doig.com.au/page-a/" class="nav-link">Page A</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1704"><a title="Page B" href="http://dev.doig.com.au/page-b/" class="nav-link">Page B</a></li>
</ul></div>

JSFiddle here

但是，ul＃main-menu不会浮动或右对齐。我不明白为什么会这样。

我甚至试过#navbarNavDropdown {text-align: right;}，但我不认为这适用于flex模型。

帮助您了解如何将主菜单移至#navbarNavDropdown

的右侧

2 个答案:

答案 0 :(得分：0)

水平对齐的正确属性是justify-content：

#navbarNavDropdown {
    align-content: flex-end;
    justify-content: flex-end;
}

小提琴：https://jsfiddle.net/xq8rgevo/7/

答案 1 :(得分：0)

你的意思是像这样的对齐/浮动菜单吗？ 

    #navbarNavDropdown {
    align-content: flex-end;
    }
    #main-menu {
    width: 700px;
    float: right;
    }
    .navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    }
    .navbar-collapse {
    width: 100%;
    }
    .navbar-nav {
    display:inline-block;
    text-align:right;
    }
    .menu-item {
    display: inline;
    width: auto;
    }
    .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
    }
    .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #292b2c;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    }
<div id="navbarNavDropdown" class="collapse navbar-collapse">
    <ul id="main-menu" class="navbar-nav"><li class="menu-item menu-item-type-custom menu-item-object-custom nav-item menu-item-1636"><a title="Home" href="http://wpthemetestdata.wordpress.com/" class="nav-link">Home</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1637"><a title="Blog" href="http://dev.doig.com.au/blog/" class="nav-link">Blog</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1638"><a title="Front Page" href="http://dev.doig.com.au/front-page/" class="nav-link">Front Page</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1639 dropdown"><a title="About The Tests" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">About The Tests <span class="caret"></span></a>
    <ul class=" dropdown-menu" role="menu">
	  <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1697"><a title="Page Image Alignment" href="http://dev.doig.com.au/about/page-image-alignment/" class="nav-link">Page Image Alignment</a></li>
	  <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1698"><a title="Page Markup And Formatting" href="http://dev.doig.com.au/about/page-markup-and-formatting/" class="nav-link">Page Markup And Formatting</a></li>
	  <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1640"><a title="Clearing Floats" href="http://dev.doig.com.au/about/clearing-floats/" class="nav-link">Clearing Floats</a></li>
	  <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1641"><a title="Page with comments" href="http://dev.doig.com.au/about/page-with-comments/" class="nav-link">Page with comments</a></li>
	  <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1642"><a title="Page with comments disabled" href="http://dev.doig.com.au/about/page-with-comments-disabled/" class="nav-link">Page with comments disabled</a></li>
    </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1643 dropdown"><a title="Level 1" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Level 1 <span class="caret"></span></a>
    <ul class=" dropdown-menu" role="menu">
  	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1644 dropdown-submenu"><a title="Level 2" href="http://dev.doig.com.au/level-1/level-2/" class="nav-link">Level 2</a>
  	<ul class=" dropdown-menu" role="menu">
		<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1645"><a title="Level 3" href="http://dev.doig.com.au/level-1/level-2/level-3/" class="nav-link">Level 3</a></li>
		<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1699"><a title="Level 3a" href="http://dev.doig.com.au/level-1/level-2/level-3a/" class="nav-link">Level 3a</a></li>
		<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1700"><a title="Level 3b" href="http://dev.doig.com.au/level-1/level-2/level-3b/" class="nav-link">Level 3b</a></li>
  	</ul>
    </li>
  	<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1701"><a title="Level 2a" href="http://dev.doig.com.au/level-1/level-2a/" class="nav-link">Level 2a</a></li>
	  <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1702"><a title="Level 2b" href="http://dev.doig.com.au/level-1/level-2b/" class="nav-link">Level 2b</a></li>
    </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1646"><a title="Lorem Ipsum" href="http://dev.doig.com.au/lorem-ipsum/" class="nav-link">Lorem Ipsum</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1703"><a title="Page A" href="http://dev.doig.com.au/page-a/" class="nav-link">Page A</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1704"><a title="Page B" href="http://dev.doig.com.au/page-b/" class="nav-link">Page B</a></li>
    </ul></div>

相关问题
最新问题