Question

我试图将“prod_line_fields”和“look_for_fields”放在左边浮动的单独行上（我页面中的其他html原因），然后我试图让“add_field”与尊重的输入在同一行元件。我尝试使用显示内联和东西，但我无法弄明白。

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>

Answer 1

尝试此款式

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

此处添加的Float也为这些

添加了浮点数

.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/

Answer 2

如果您尝试将* 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>

html div浮动并显示

2 个答案: