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

我正在尝试创建左侧的一些项目和右侧的一些项目（左侧项目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

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

来源

2015-10-31 intboolstring

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

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

Jsfiddle

来源

2015-10-31 03:28:11 Alex

好极了！当添加更多的孩子时，是否只添加'p：nth-child（x）'，其中x是孩子号码？ – intboolstring

'p：nth-child（x）'用于将'.HL'元素浮动到右侧（最后两个'.HL'）。你可以给他们定制类（'.HL-fl-r'）。并替换为'p：nth-child（x）' – Alex

@alirezasafian我对它有一些疑问，如果我们将使用float链接，那么link2将是最后一个链接，link3将是第二个最后一个链接我们如何解决这个问题，我也有同样的想法需要做。我想输出像左侧的链接1和链接2将在右侧的第一个链接，然后链接3将是右侧的最后一个链接 – Shailesh

我会建议你使用一个CSS网格系统对于这一点，因为你很可能会在你的网站在一个需要这个功能。

这里是我在过去使用的一些网格系统：

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

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

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

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

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

来源

2015-10-31 03:29:10

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

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

来源

2015-10-31 04:18:21 Shailesh

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

回答

相关问题