对齐2个没有大小的div答案

【问题标题】：Align 2 div without size对齐2个没有大小的div
【发布时间】：2012-11-30 06:07:30
【问题描述】：

是否可以在第 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>

谢谢！

【问题讨论】：

标签： css width alignment inline percentage

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

您是否无意中从.navbar .breadcrumb li 样式定义中删除了display: inline;？
哎呀我无意中删除了它：P对不起！我现在正在编辑答案:)

【解决方案3】：

如果您将按钮移动到标记的顶部并给它一个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;
}

【讨论】：

在这种情况下，我会选择marctrem's answer，但在.navbar .breadcrumb li 样式上保留display: inline;。这是他的代码，只是进行了更改：jsFiddle.
是的，@marctrem 的例子是好的。谢谢。