HTML Div плавает и отображает

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;
}

Поплавок добавлен сюда, также добавьте поплавок для этих

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