html/css定位三個文本框

Question

我目前正在嘗試編寫自己的投資組合網站，並努力定位三個文本框。在我的網站上，我希望盒子左側，中間和右側均位於一行中。

我嘗試了不同的東西，如將每個文本框放在單獨的div中，並試圖定位它們，但它們只放在下面，而不是隔壁放置css規則。我也嘗試將這些框放在列表中，並嘗試將它們內聯。

任何想法？

Answer 1

也許這

.foo 
{ 
    float: left; 
    width: 33%; 
} 

Answer 2

試試這個

<div id="con"> 
    <div class="float">Hello</div> 
    <div class="float">World</div> 
</div> 

而CSS

.float { float:left; width:100px; height:100px; background:yellow; } 

檢查JSFiddle這裏

Answer 3

你的HTML是水木清華這樣的：

<div></div> 
<div></div> 
<div></div> 

而CSS：

div{width:30%;margin:1%;border:1px solid blue; float:left; height:100px;} 

下面是一個例子：http://jsfiddle.net/795T4/。

Answer 4

有一些HTML這樣

<ul class="portfolio"> 
    <li><input id="txtBox1" type="text"></li> 
    <li><input id="txtBox2" type="text"></li> 
    <li class="last"><input id="txtBox3" type="text"></li> 
</ul> 

和CSS沿着這是基於固定寬度的網站的

.portfolio{ 
    margin:10px auto; 
    width:1000px 

} 
.portfolio li{ 
    float:left; 
    display:block; 
    width:330px; 
    height:200px; 
    background-color:#e4e4e4; 
    margin-right:15px 
} 
.portfolio .last{ 
    margin-right:0 
} 

行，因爲語義你我會使用一個無序列表<ul>有3個箱子的清單。