1

是否可以在没有大小的第 2 行 div 中自动对齐？目标是获得类似于附加图像的东西。

我无法设置百分比（80% 和 20%），因为内容是动态的。我不能使用桌子。任何的想法？示例：http: //jsfiddle.net/hKRyG/

<html>
<head>
<style type="text/css">
.navbar {
    width: 500px;
    background: #ccc;    
    display:table;
}

.navbar .breadcrumb {    
    float:left;    
}

.navbar .breadcrumb ul {
    margin: 0;
    padding: 0;
}

.navbar .breadcrumb li {
    list-style: none;
    display: inline;
}

.navbar .navbutton {
    float: right;    
}
</style>
</head>
<body>
<div class="navbar">

<div class="breadcrumb">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
</div>
    
<div class="navbutton">
    <input type="button" value="BUTTON" />
</div>

</div>
</body>
</html>

谢谢！

图片

4

3 回答 3

1

使用以下内容：

<html>
<head>
<style>
.navbar {
width: 500px;
background: #ccc;    
display:table;
float: left;
}

.navbar .breadcrumb {    
float:left;    
}

.navbar .breadcrumb ul {
margin: 0;
padding: 0;
}

.navbar .breadcrumb li {
list-style: none;
display: inline;
}

.navbar .navbutton {
 float: right;    
 }
 </style>
 </head>
 <body>
 <div class="navbar">

 <div class="breadcrumb">
 <ul>
 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
 <li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
 <li>-></li>
 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
 <li>-></li>
 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
 </div>



 </div>
 <div class="navbutton">
<input type="button" value="BUTTON" />
 </div>
 <body>
 </html>
于 2012-12-12T14:02:45.673 回答
1

给你！要在未定义大小的情况下对齐，您必须使用表格显示属性

.navbar {
    width: 500px;
    background: #ccc;    
    display:table;
}

.navbar .breadcrumb ul {
    margin: 0;
    padding: 0;
}

.navbar .breadcrumb li {
    list-style: none;
    display: inline;

}

.navbar ul{
    display: table-cell;
}

.navbutton {
    display: table-cell;
    vertical-align: middle;
}
于 2012-12-12T14:14:50.150 回答
0

如果您将按钮移动到标记的顶部并给它一个float: right;，那么添加overflow: hidden;到<div class="breadcrumb">按钮应该是向右对齐的，并且面包屑将占据左侧剩余的任何空间。

jsFiddle

HTML：

<div class="navbar">
    <div class="navbutton">
        <input type="button" value="BUTTON" />
    </div>
    <div class="breadcrumb">
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
            <li>-></li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
            <li>-></li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
            <li>-></li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        </ul>
    </div>
</div>​

CSS

.navbar {
    width: 500px;
    background: #ccc; 
}

.navbar .navbutton {
    float: right;
}

.navbar .breadcrumb { 
    overflow: hidden;
}

.navbar .breadcrumb ul {
    margin: 0;
    padding: 0;
}

.navbar .breadcrumb li {
    list-style: none;
    display: inline;
}​
于 2012-12-12T14:16:42.827 回答