嵌入式div在包含塊輸入按鈕時的行爲類似於塊

我對CSS並不擅長，但我想創建兩個選擇列表，並使用它們之間的按鈕面板來控制選定項目的來回移動。我希望它看起來像這樣：嵌入式div在包含塊輸入按鈕時的行爲類似於塊

+----------------------+-+  +----------------------+-+ 
|      | | ___ |      | | 
|      | | |_>_| |      | | 
|      | | ___ |      | | 
|      | | |_<_| |      | | 
|      | |  |      | | 
|______________________|_|  |______________________|_|

我有以下HTML：

<div id='recipientSelection'> 
    <div class='clientsBox'> 
     <select id='allClients' size='5'> 
      <option>dfsdfs</option> 
      <option>sdfsdfds</option> 
      <option>fsdfsdfsdfsdf</option> 
      <option>dsf dsfsdfsdf</option> 
      <option>afaf</option> 
      <option>t</option> 
      <option>sdgfhgsfh</option> 
     </select> 
    </div> 
    <div id='clientButtons'> 
     <input type='button' id='appendButton' value='>' /> 
     <input type='button' id='removeButton' value='<' /> 
    </div> 
    <div class='clientsBox'> 
     <select id='chosenClients' size='5'> 
      <option>dfsdfs</option> 
      <option>sdfsdfds</option> 
      <option>fsdfsdfsdfsdf</option> 
      <option>dsf dsfsdfsdf</option> 
      <option>afaf</option> 
      <option>t</option> 
      <option>sdgfhgsfh</option> 
     </select> 
    </div> 
</div>

下面CSS：

div#recipientSelection { 
    margin-left: 50px; 
    width: 90%; 
} 

select#allClients { 
    width: 25%; 
} 

select#chosenClients { 
    width: 25%; 
} 

div.clientsBox { 
    display: inline; 
} 

div#clientButtons { 
    display: inline; 
    width: 15%; 
} 

input#appendButton { 
    display: block; 
} 

input#removeButton { 
    display: block; 
}

如果我使按鈕塊元素，包含其div開始表現得像塊元素一樣。我希望按鈕是相對於彼此的塊元素，但我希望按鈕面板與選擇內聯。我懷疑這裏有些重要的東西我不明白。幫幫我？

來源

2010-08-25 psicopoo

您需要'float'了'div'叫什麼。在'div's上應用'float：left'應該達到你要找的效果。 – 2010-08-25 14:19:39

塊級元素沒有內聯元素內允許
一般人會飄起了三盒一前一後保持它們的塊

div.clientsBox { 
    float: left; 
} 

div#clientButtons { 
    float: left; 
    width: 15%; 
}

來源

2010-08-25 14:20:46

我用下面的代碼能夠完成所需的外觀。不知道如果你試圖從浮筒或什麼不能說走就走，但這並工作

CSS：

div#recipientSelection { 
     margin-left: 50px; 
     width: 90%; 
    } 

    select#allClients { 
     width: 100%; 
    } 

    select#chosenClients { 
     width: 100%; 
    } 

    div.clientsBox { 
     float:left; 
     width: 30%; 
    } 

    div#clientButtons { 
     float:left; 
     width: 4%; 
     margin-left:20px; 
    }

HTML

<div id='recipientSelection'> 
    <div class='clientsBox' style="clear:left;"> 
     <select id='allClients' size='5'> 
      <option>dfsdfs</option> 
      <option>sdfsdfds</option> 
      <option>fsdfsdfsdfsdf</option> 
      <option>dsf dsfsdfsdf</option> 
      <option>afaf</option> 
      <option>t</option> 
      <option>sdgfhgsfh</option> 
     </select> 
    </div> 
    <div id='clientButtons'> 
     <input type='button' id='appendButton' value='&#62;' /><br /> 
     <input type='button' id='removeButton' value='&#60;' /> 
    </div> 
    <div class='clientsBox' style="clear:right;"> 
     <select id='chosenClients' size='5'> 
      <option>dfsdfs</option> 
      <option>sdfsdfds</option> 
      <option>fsdfsdfsdfsdf</option> 
      <option>dsf dsfsdfsdf</option> 
      <option>afaf</option> 
      <option>t</option> 
      <option>sdgfhgsfh</option> 
     </select> 
    </div> 
</div>

來源

2010-08-25 14:28:27 bradenkeith

另請注意，我已更新您的按鈕值，以包含正確的HTML實體 – bradenkeith 2010-08-25 14:33:27

+1，謝謝！ – psicopoo 2010-08-25 15:52:41

<html> 
<head> 
<style> 
#recipientSelection{width:300px} 
.clientsBox{width:40%} 
#clientButtons{width:20%} 
.clientsBox, 
#clientButtons{display:block;float:left} 
#clientButtons{text-align:center} 
</style> 
</head> 
<body> 
<div id='recipientSelection'> 
    <div class='clientsBox'> 
     <select id='allClients' size='5'> 
      <option>dfsdfs</option> 
      <option>sdfsdfds</option> 
      <option>fsdfsdfsdfsdf</option> 
      <option>dsf dsfsdfsdf</option> 
      <option>afaf</option> 
      <option>t</option> 
      <option>sdgfhgsfh</option> 
     </select> 
    </div> 
    <div id='clientButtons'> 
     <input type='button' id='appendButton' value='>' /> 
     <input type='button' id='removeButton' value='<' /> 
    </div> 
    <div class='clientsBox'> 
     <select id='chosenClients' size='5'> 
      <option>dfsdfs</option> 
      <option>sdfsdfds</option> 
      <option>fsdfsdfsdfsdf</option> 
      <option>dsf dsfsdfsdf</option> 
      <option>afaf</option> 
      <option>t</option> 
      <option>sdgfhgsfh</option> 
     </select> 
    </div> 
</div> 
</body> 
</html>

來源

2010-08-25 14:30:24

您可能需要在下面的元素上添加一個清除：取決於您如何使用它。 – 2010-08-25 14:32:18

有一個CSS屬性display: inline-block，但並不是所有瀏覽器都支持。有了這個略顯更新的代碼

<div id='recipientSelection'> 
    <div id='allClients'> 
     <select size='5'> 
      <option>dfsdfs</option> 
      <option>sdfsdfds</option> 
      <option>fsdfsdfsdfsdf</option> 
      <option>dsf dsfsdfsdf</option> 
      <option>afaf</option> 
      <option>t</option> 
      <option>sdgfhgsfh</option> 
     </select> 
    </div> 
    <div id='chosenClients'> 
     <select size='5'> 
      <option>dfsdfs</option> 
      <option>sdfsdfds</option> 
      <option>fsdfsdfsdfsdf</option> 
      <option>dsf dsfsdfsdf</option> 
      <option>afaf</option> 
      <option>t</option> 
      <option>sdgfhgsfh</option> 
     </select> 
    </div> 
    <div id='clientButtons'> 
     <input type='button' id='appendButton' value='>' /><br/> 
     <input type='button' id='removeButton' value='<' /> 
    </div> 
    <div style="clear: both"></div> 
</div>

你可以使用這個有效的CSS展現你想

div#recipientSelection { width: 90%; margin: 0 auto; text-align: center; } 
div#allClients { width: 25%; float: left; } 
div#chosenClients { width: 25%; float: right; } 
div#allClients select, div#chosenClients select { width: 100%; } 
div#clientButtons { display: block; width: 15%; text-align: center; margin: 0 auto; }

來源

2010-08-25 14:47:44

嵌入式div在包含塊輸入按鈕時的行爲類似於塊

回答

相關問題