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

Question

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

我已尝试解决此问题:

• float :右
• text-align:right

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

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