HTML + CSSは、テーブルここ

Question

せずに、ULの横にあるボタンを置くことは、私が達成したいものです^

ここ

それが今どのように動作するかです：http://jsfiddle.net/yfxPm/1/

問題は、私は置けばということです CSSを：コンテンツの残りの部分は

<div class='field'> 
    <ul class='display'> 
    <li>apple</li> 
    </ul> 
    <button class='btn'>...</button> 
    <div> 
<button>this button will go inside .field div </button> 

の内側に行くよりも、（選択図】図の両方の助けにはならないクリア）：左：フロート

.field 
{ 
    width: 200px; 
    margin: 1em; 
} 
.display 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    border: solid 1px gray; 
    background: white; 
    float: left;  
} 

一つの解決策は、選択図】図divの終了前に<br style="clear:both" />を置くことであろうが、これはいくつかの追加のパディング

Answer 1

見て、馬、ノーフロート！

HTML

<div> 
    <ul> 
     <li>Apple</li> 
     <li>Papaya</li> 
    </ul> 
    <button type="submit">&hellip;</button>  
</div> 
<button>should be below</button> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 

CSS

div { display:block; } 
ul { display:inline-block; } 
button { display:inline-block; vertical-align:top; } 

Answer 2

私は

を動作するはず

<div class='field' style="float:left"> 
    <ul class='display'> 
     <li>apple</li> 
    </ul> 
</div> 
<div style="float:left"> 
    <button class='btn'>...</button> 
<div> 

のようなものを考えているが追加されます

Answer 3

ここでは、クリアを使用する方法を示します。どちらも適切です。

HTML ：

<div class="field"> 
     <ul class="display"> 
      <li>apple</li> 
      <li>apple</li> 
      <li>apple</li> 
      <li>apple</li> 
     </ul> 
     <button class='btn'>...</button> 
     <div class="clear"></div> 
    </div> 
<button>should be below</button> 

CSS：明確なクラスで空のdivを使用して

.field 
{ 
    width: 200px; 
    margin: 1em; 
} 
.display 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    border: solid 1px gray; 
    background: white; 
    float: left;  
} 
.clear { 
    clear:both; 
} 

、フロートをクリアし、任意のパディングを追加しません。また、さまざまなブラウザで同じ方法でレンダリングされます

Answer 4

overflow: hiddenここでより適切かもしれません。

<div class="field"> 
    <button class='btn'>...</button> 
    <ul class="display"> 
     <li>apple</li> 
     <li>apple</li> 
     <li>apple</li> 
     <li>apple</li> 
    </ul> 
</div> 
<button>should be below</button> 

.field { 
    margin: 1em; 
    overflow: hidden; /*Clear the floated children */ 
} 
.display 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    border: solid 1px gray; 
    background: white; 
    overflow: hidden; /*Leave a gap on the right for the button*/  
} 
.btn { 
    float: right; 
}