Question

我试图创建一个左侧有一些项目的导航栏和右侧的一些项目（左侧是项目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

任何帮助将不胜感激！：）

Answer 1

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

{{1}}

Jsfiddle

Answer 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/

Answer 3

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Demo

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

3 个答案: