html div浮動和顯示

我想讓「prod_line_fields」和「look_for_fields」分別浮動到左邊（我的頁面中的其他html原因），然後我試圖讓「add_field」在相同的作爲尊重的輸入元素。我試着玩顯示內聯和東西，但我無法弄清楚。html div浮動和顯示

CSS

#building_infoer_hld{ 
    float:left; 
    display:inline; 
    margin:15px 0 0 0; 
    width:725px; 
} 

.add_field{ 
    width:135px; 
    height:24px; 
    cursor:pointer; 
} 


#prod_line_fields{ 
    margin:10px 0 0 0; 
} 
.prod_line_inpt{ 
    width:133px; 
    height:22px; 
    margin:0 5px 10px 0; 
    padding:0 0 0 6px; 
    border:#2B4754 1px solid; 
} 

#look_for_fields{ 
    margin:10px 0 0 0; 
} 
.look_for_inpt{ 
    width:133px; 
    height:22px; 
    margin:0 5px 10px 0; 
    padding:0 0 0 6px; 
    border:#2B4754 1px solid; 
}

HTML

<div id="building_infoer_hld"> 
    <div id='title_field'> 
     <input class="input_title" name="niche_title" type="text" value="Sample Text" /> 
    </div> 
    <div id='prod_line_fields'> 
     <input type="text" class="prod_line_inpt" id="prod_line_0" name="product_line[]" /><div id="add_prod_line" class="add_field"></div> 
    </div> 
    <div id='look_for_fields'> 
     <input type="text" class="look_for_inpt" id="look_for_0" name="look_for[]" /><div id="add_look_for" class="add_field"></div> 
    </div> 
</div>

來源

2011-09-21 seesoe

小提琴：http://jsfiddle.net/mohs恩/ ePZyc/ – Mohsen

抱歉不清楚，即時嘗試獲取以下三個div在不同的線上，「title_field」，「prod_line_fields」，「look_for_fields」然後，對於他們的投入，我想div「add_field」與輸入框所在的行相同。 – seesoe

嘗試這種風格

.add_field{ 
    width:135px; 
    height:24px; 
    cursor:pointer; 
    float:left; 
}

浮動添加這裏也爲這些

.prod_line_inpt,.look_for_inpt 
{ float:left; 
} 
#look_for_fields{ 
    margin:10px 0 0 0; 
    clear:left; 
}

加浮動

檢查這個http://jsfiddle.net/tDjzR/6/

結果是這裏 http://jsfiddle.net/tDjzR/6/embedded/result/

來源

2011-09-21 07:13:04 Sanooj

就像一個魅力工作謝謝！我猜明白是浮動div的技巧，今天學會了一個新的規則 – seesoe

，如果你正試圖使* add_field *作爲標籤，如果你想堅持你的佈局，你可以使用這個代替

<div id="building_infoer_hld"> 
<div id='title_field'> 
    <input class="input_title" name="niche_title" type="text" value="Sample Text" /> 
</div> 
<div id='prod_line_fields'> 
    <input type="text" class="prod_line_inpt" id="prod_line_0" name="product_line[]" /><label for="product_line[]">product_line</label> 
</div> 
<div id='look_for_fields'> 
    <input type="text" class="look_for_inpt" id="look_for_0" name="look_for[]" /><label for="product_line[]">look_for</label> 
</div> 
</div>

，這是我的問題的解釋：

<style type="text/css"> 
#building_infoer_hld 
{ 
background: #ccc; 
} 

#prod_line_fields{ 
margin:10px 0 0 0; 
background: blue; 
clear: both; 
} 
#prod_line_fields input, #look_for_fields input{ 
float:left; 
} 
#prod_line_fields#add_prod_line{ 
float: right; 
} 

.prod_line_inpt,.look_for_inpt{ 
width:133px; 
height:22px; 
margin:0 5px 10px 0; 
padding:0 0 0 6px; 
border:#2B4754 1px solid; 
} 

#look_for_fields{ 
margin:10px 0 0 0; 
background: yellow; 
clear: both; 
} 
</style>

來源

2011-09-21 07:17:43 Bob

沒有它不會是一個標籤 – seesoe

您可以使用Sanooj風格 - 與我提供的css相同的輸出 – Bob

您可以臨時着色div塊以可視化到底是怎麼回事。 :) – Bob

html div浮動和顯示

回答

相關問題