对齐2尺寸不对齐

是否可以自动对齐第2行div 没有尺寸？目标是获得像附加图像的东西。对齐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>

谢谢！

来源

2012-12-12 FeKuLa

你去那里！为了不定义的大小如果移动的按钮标记的顶部，并给它一个float: right;必须使用表格显示属性

.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-12 14:14:50 marctrem

您是否无意中从'.navbar .breadcrumb li'样式定义中删除了'display：inline;'？ – tiffon

它的工作原理，谢谢。 – FeKuLa

哎呀我无意中删除了它：P对不起！我正在编辑答案:) – marctrem

使用以下命令：

<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-12 14:02:45 AgeDeO

没有宽度尺寸请。 – FeKuLa

对不起，改了它 – AgeDeO

非常感谢。 – FeKuLa

，再加入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-12 14:16:42 tiffon

我不能更改HTML代码，对不起 – FeKuLa

在这种情况下，我会与[marctrem的回答]（http://stackoverflow.com/a/13841709/1888292），但保持'.navbar .breadcrumb li'样式中的'display：inline;'。这是他的代码，只是这种变化：[jsFiddle]（http://jsfiddle.net/hKRyG/2/）。 – tiffon

是的，@marctrem的例子是好的。谢谢。 – FeKuLa

对齐2尺寸不对齐

回答

相关问题