导航栏对齐部分右部分左错误答案

【问题标题】：Navbar align part right part left errors导航栏对齐部分右部分左错误
【发布时间】：2015-10-31 03:19:09
【问题描述】：

我正在尝试创建一个导航栏，其中一些项目位于左侧，一些项目位于右侧（左侧项目 1，右侧项目 2 和 3）。我的 JSFiddle 有我当前的代码。

我尝试解决此问题的方法：

float: right
text-align:right

它们似乎都不起作用。我确信有一个超级简单的解决方案，但我就是想不出。

HTML：

<div class="navbar">
        <!--Create the button home -->
        <p class="innav">Num1</p>
        <p class="HL">|</p>
        <p class="rightIn">Num2</p>
        <p class="HL">|</p>
        <p class="rightIn">NUM 3</p>
        <p class="HL">|</p>

</div>

CSS：

div.navbar{
width:100%;
height: 30px;
background-color: #03572c;
}

p{
    display: inline;
}

p.innav{
color:white;
font-size: 24px;
width: 30px;
height: 30px;
margin-left: 10px;
margin-top: 10px;
}
p.rightIn{
color:white;
font-size: 24px;
width: 30px;
height: 30px;
margin-left: 10px;
margin-top: 10px;

}
.HL{
margin-left: 10px;
color:white;
font-size:24px;

}

JSfiddle

任何帮助将不胜感激！ :)

【问题讨论】：

标签： html css alignment navbar

【解决方案1】：

将这些样式添加到您的 CSS 中。

p.rightIn,
p:nth-child(4),
p:nth-child(6)
{
    float: right;
    margin: 0px 5px;
    width: auto;
}

Jsfiddle

【讨论】：

太棒了！添加更多孩子时，我是否只需添加 p:nth-child(x) 其中 x 是孩子编号？
p:nth-child(x) 用于将.HL 元素浮动到右侧（最后两个.HL）。您可以为他们提供自定义课程（.HL-fl-r）。并替换为p:nth-child(x)
@alirezasafian 我对此有一些疑问，如果我们将使用浮动链接，那么链接 2 将是最后一个链接，链接 3 将是倒数第二个链接我们如何解决这个问题，我有同样的想法需要做。我想要左侧的链接 1 之类的输出，链接 2 将是右侧的第一个链接，然后链接 3 将是右侧的最后一个链接
包装那些你想向右浮动的元素并将浮动权赋予包装元素。检查this
谢谢@alirezasafian 我得到了解决方案，没有添加任何包装器，也没有改变链接的位置，请检查这个链接jsfiddle.net/shaileshp16/81ajq6ko/1

【解决方案2】：

我建议您为此使用 CSS 网格系统，因为您的网站可能需要此功能。

以下是我过去使用过的一些网格系统：

纯 CSS
http://purecss.io/grids/

基金会
http://foundation.zurb.com/docs/components/grid.html

引导
http://getbootstrap.com/css/#grid

语义用户界面
http://semantic-ui.com/collections/grid.html

或者，如果您想创建自己的网格系统，这里有一篇关于它的好文章：
http://www.sitepoint.com/understanding-css-grid-systems/

【讨论】：

我认为这是评论，而不是答案。请在评论部分插入这种答案。

【解决方案3】：

nav {
    background: #000000;
    width: 100%;
    display: block;
    padding: 8px 0;
    font-family: arial;
    font-size: 13px;
}
nav span {
    display:block;
    width:100%;
    line-height: normal;
    text-align:right;
}
nav a {
    color: #ffffff;
    padding: 0 10px;
    text-decoration: none;
    display:inline-block;
    border-right:1px solid #ffffff;
}
nav a:first-child{
    float:left;
}
nav a:last-child{
    border:none;
}

<nav>
    <span>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </span>
</nav>

Demo

【讨论】：