html - 按钮未对齐以选择表单

Question

按钮位于选择表单的下方。它们都在表格的一列中。如何使按钮位于选择表单的右侧，并在它们之间留出微小的空间。

HTML:

 <form class='form-horizontal'>
        <fieldset  >   
            <span class='control-group' >
            <span  class='controls'>
                <select id='fl' class='form-control' style='cursor:pointer;'>
                    <option value='1'>Option1</option>
                   <option value='2'>Option2</option>
                   </select>

            </span>
            </span>
            <div><button id='mybtn' type='button'>Save</button></div>
        </fieldset>

    </form>

CSS:

#fl{
    padding: 3px;
    height:25px;
    font-style: italic;
    width:150px;
    margin-right: 0px;
}

在 inspect 元素中，“<select id='fl' class='form-control' style='cursor:pointer;' >`” 行悬停时，尽管在我的 css 文件中将其设置为 0px，但在右侧显示了大量的橙色边距。

JSFiddle:http://jsfiddle.net/qJ8ee/

Answer 1

试试这个:

#fl{
    padding: 3px;
    height:25px;
    font-style: italic;
    width:150px;
    margin-right: 0px;
    float:left;
}

JSFiddle:

http://jsfiddle.net/qJ8ee/2/