Question

第2行可以自动对齐没有尺寸吗？目标是获得附图像。

我无法设置百分比（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>

谢谢！

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

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

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

对齐没有大小的2 div

3 个答案: