html + css, поместите кнопку рядом с ul без таблицы

Question

Вот чего я хочу добиться ^

Вот как это работает сейчас: http://jsfiddle.net/yfxPm/1/

Проблема в том, что если я поставлю float: left, то остальная часть содержимого попадет внутрь

    <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 не помогают) КСС:

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

Одним из решений было бы поставить <br style="clear:both" /> перед концом div .field, но это добавит дополнительный отступ

Answer 1

вот как использовать clear: оба правильно

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:

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

Использование пустого div с классом clear очистит,плавать и не добавлять какие-либо отступы.Также он будет отображаться одинаково в разных браузерах

Answer 2

Смотри, мама, не плавает!

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 3

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

Answer 4

Я думаю, что-то вроде

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

Должно работать