如何使用CSS佈局關注內容？

Question

這裏是我想使佈局：

「輸入」是屏幕的70％的寬度。 和「第二輸入」是「輸入」的70％寬度。 「按鈕」是「輸入」的30％寬度。 '輸入'位於屏幕中間。

我該怎麼做？謝謝。

Answer 1

不要以爲這需要任何特殊技能。這是一個非常基本的流體佈局。一個例子

標記

<div id="wrapper"> 
    <input type="text" id="firstrow_textbox" /> 
    <input type="text" id="secondrow_textbox" /> 
    <input type="button" id="secondrow_button" /> 
</div> 

CSS

#wrapper { 
    width: 70%; 
} 
    #firstrow_textbox { width: 100%; } 
    #secondrow_textbox { width: 70%; } 
    #secondrow_button { width: 28%; } /* Due to border and all */ 

Demo

Answer 2

您可以通過創建一個具有所需「屏幕寬度70％」的包裝元素，然後調整輸入大小來獲得此功能。

例子：http://jsbin.com/akeze4

你還是要調整邊距和補爲您的特定目的，但是這應該是一個不錯的開始。

Answer 3

事情是這樣的 - >http://jsfiddle.net/Husar/gkFhb/2/

只是微調邊距和填充

Answer 4

佈局：

<div class="container"> 
    <div> 
     <input type="text" id="input1" /></div> 
    <div> 
     <input type="text" id="input2" /> 
     <input type="button" id="input3" /></div> 
</div> 

CSS：

.container { 
    margin: auto; /* to center the container horizontally */ 
    width: 70% /* to take the 70% of the parent element */ 
    } 
    #input1 { 
    width: 100%; /* to take the 100% of the parent which is the container div */ 
    } 
    #input2 { 
    float: left; /* to align the control on the left */ 
    width:70%; /* to take the 70% of the parent which is the container div */ 
    } 
    #input3 { 
    float: right; /* to align the control to the right */ 
    width:29%; /* to take the 29% of the parent which is the container div */ 
    } 

預覽：http://jsbin.com/ibeyo5