Fatal编程技术网
  • css/
  • Css 对齐2个div，无大小

Css 对齐2个div，无大小

css

Css 对齐2个div，无大小,css,width,alignment,inline,percentage,Css,Width,Alignment,Inline,Percentage,是否可以在第2行div中自动对齐，而不调整大小？ 我们的目标是得到像图片一样的东西 我无法设置百分比（80%和20%），因为内容是动态的。我不能用桌子。有什么想法吗？ 例如： navbar先生{ 宽度：500px； 背景：#ccc； 显示：表格； } .navbar.breadcrumb{ 浮动：左； } .导航栏.面包屑ul{ 保证金：0； 填充：0； } .导航栏.面包屑李{ 列表样式：无； 显示：内联； } .navbar.navbutton{ 浮动：对； } Lorem ipsum

是否可以在第2行div中自动对齐，而不调整大小？ 我们的目标是得到像图片一样的东西

我无法设置百分比（80%和20%），因为内容是动态的。我不能用桌子。有什么想法吗？ 例如：


navbar先生{
宽度：500px；
背景：#ccc；
显示：表格；
}
.navbar.breadcrumb{
浮动：左；
}
.导航栏.面包屑ul{
保证金：0；
填充：0；
}
.导航栏.面包屑李{
列表样式：无；
显示：内联；
}
.navbar.navbutton{
浮动：对；
}

    

  • Lorem ipsum dolor sit amet，献祭精英
    • 

  • ->
    • 

  • Lorem ipsum dolor sit amet，献祭精英
    • 

  • ->
    • 

  • Lorem ipsum dolor sit amet，献祭精英
    • 

  • ->
    • 

  • Lorem ipsum dolor sit amet，献祭精英
    •
谢谢大家!

使用以下方法：

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


navbar先生{
宽度：500px；
背景：#ccc；
显示：表格；
浮动：左；
}
.navbar.breadcrumb{
浮动：左；
}
.导航栏.面包屑ul{
保证金：0；
填充：0；
}
.导航栏.面包屑李{
列表样式：无；
显示：内联；
}
.navbar.navbutton{
浮动：对；
}

    

  • Lorem ipsum dolor sit amet，献祭精英
    • 

  • ->
    • 

  • Lorem ipsum dolor sit amet，献祭精英
    • 

  • ->
    • 

  • Lorem ipsum dolor sit amet，献祭精英
    • 

  • ->
    • 

  • Lorem ipsum dolor sit amet，献祭精英
    •
好了！若要在未定义大小的情况下对齐，必须使用表显示特性

.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;
}
如果将按钮移动到标记的顶部，并给它一个
float:right
，然后添加
溢出：隐藏
至
按钮应向右齐平，面包屑将占据左侧剩余的任何空间

HTML:

在这种情况下，我会使用，但保持
显示：inline.navbar.breadcrumb li
样式设置中选择code>。这是他的代码，只是做了这样的更改：。是的，@marctrem的示例是可以的。谢谢。您是否无意中删除了
display:inline
来自
.navbar.breadcrumb li
样式定义？哎呀，我无意中删除了它：P对不起！我正在编辑答案：） 
.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;
}

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

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