2015-10-20 506 views
1

我在尝试使用CSS来布局导航区域。我试图让我的项目是这样的:用CSS在Nav中右对齐按钮

+---------------------+ 
| header  [add] | 
| item 1    | 
| item 2    | 
|      | 
+---------------------+ 

在试图做到这一点,我已经定义了以下HTML:

<nav style="width:100%; background-color:gray;"> 
    <div style="width:100%;"> 
    <h5 class="nav-title">header</h5> 
    <button class="btn pull-right" style="height:1.2rem;">add</button> 
    </div> 
    <span class="nav-item"> 
    <span class="icon icon-home"></span> 
    item 1 
    </span> 
    <span class="nav-item active"> 
    <span class="icon icon-light-up"></span> 
    item 2 
    </span> 
</nav>  

我初步认识CSS是这样的:

.nav-item { 
    padding: 2px 10px 2px 25px; 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
.nav-item:active, .nav-group-item.active { 
    background-color: #dcdfe1; 
} 
.nav-item .icon { 
    width: 19px; 
    height: 18px; 
    float: left; 
    margin-top: -3px; 
    margin-right: 7px; 
    text-align: center; 
} 

.nav-title { 
    margin: 0; 
    padding: 10px 10px 2px; 
} 

不幸的是,当渲染时,“添加”按钮没有正确对齐。虽然它的右对齐,它出现在“第1项”的同一行。我试图弄清楚如何使“添加”按钮与“标题”出现在同一行上。我究竟做错了什么?

回答

0

你H5标签被占用的100%父母的宽度。将h5 css设置为> display:inline-block;

宽度:50%

,做同样以您的按钮。 或者如果您使用的彩车然后确保添加具有CSS属性的按钮下方的空div右浮动两种H5和按钮左右respectivly :

明确:两者;

否则,父div的高度将为零。

对不起,如果在我的答复格式不合格。这是我在手机应用程序上的第一个回应。

0

放置该按钮的头之前并漂浮到右:

<nav style="width:100%; background-color:gray;"> 
    <div style="width:100%;"> 
    <button class="btn pull-right" style="height:1.2rem;">add</button> 
    <h5 class="nav-title">header</h5> 
    </div> 
    <span class="nav-item"> 
    <span class="icon icon-home"></span> 
    item 1 
    </span> 
    <span class="nav-item active"> 
    <span class="icon icon-light-up"></span> 
    item 2 
    </span> 
</nav> 

CSS:

button { 
    float: right; 
    margin: 10px; 
} 

实时预览:JSFiddle