导航栏对齐部分右侧部分左侧错误

Question

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

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

float: right
text-align:right

None 其中似乎有效。我确定有一个超级简单的解决方案，但我就是想不出。

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

如有任何帮助，我们将不胜感激！ :)

Answer 1

将这些样式添加到您的 css。

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

Jsfiddle

Answer 2

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

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

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

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

Bootstrap
http://getbootstrap.com/css/#grid

语义UI
http://semantic-ui.com/collections/grid.html

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

Answer 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

导航栏对齐部分右侧部分左侧错误

Navbar align part right part left errors

html

css

alignment

navbar