HTML + CSS，旁邊放一個按鈕而不表

這裏UL是我想達到什麼樣的^

的問題是，如果我把浮動：左大於內容的其餘部分將裏面去

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

（明確：無論在點域沒有幫助）的CSS：

.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" />但是這會增加一些額外的填充

來源

2011-07-25 Omu

你確定你應該在這裏使用'ul'元素？看起來你想要一個'select'。 – You

@You是的，我敢肯定， – Omu

可以顯示它正在做什麼，像什麼樣子？ –

看，麻，沒有花車！

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

來源

2011-07-25 15:57:12 sqwk

我想這樣

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

應工作

來源

2011-07-25 08:54:47 danneth

我的回答沒有，這是同樣的事情 – Omu

對不起，我錯過了第二個按鈕你的問題。我責怪缺乏咖啡 – danneth

這裏是如何使用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; 
}

用空分度類清楚，將清除浮子和不添加任何填充。它也將呈現不同的瀏覽器

來源

2011-07-25 09:07:34 Ibu

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

來源

2011-07-25 09:39:04 Eric

HTML + CSS，旁邊放一個按鈕而不表

回答

相關問題