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

どうぞ！サイズを定義せずに整列するには、テーブル表示プロパティを使用する必要があります

.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 に答える
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 に答える
0

ボタンをマークアップの一番上に移動して を付ける場合は、ボタンを右に揃えてfloat: right;追加overflow: hidden;する<div class="breadcrumb">と、パンくずリストが左側に残っているスペースを占有します。

jsフィドル

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 に答える