html - 调整到正确的输入框并选择下拉菜单？

Question

试图在这个主题中找到一个问题和答案，但我找不到。

我正在尝试调整输入框并选择右侧的下拉菜单。我尝试了一些方法，例如定位和向右浮动标签以及输入和向左选择无济于事。

            <div class="tabContainer clearfix">
                <form>
                    <select name="selectionField" id="selectionField">
                        <option value="membership1">$9.95(USD) for 3 days (non-recurring)</option>
                        <option value="membership2">$89.95(USD) for 1 year (non-recurring)</option>
                        <option value="membership3">$34.95(USD) for 1 Month (recurring)</option>
                    </select>
                    <p><label for="credit_card">Credit Card #: </label>
                    <input type="text" name="credit_card" id="credit_card" placeholder="Credit Card Number" maxlength="16" size="20" autofocus required /></p>
                    <p><label for="cvv2InputField">CVV2 Number:&nbsp;</label>
                    <input type="text" name="cvv2InputField" id="cvv2InputField" maxlength="4" size="4" value onfocus="explainCVV2(this, 1)" onblur="explainCVV2(this, 0)" required /></p>
                    <p><label for="expirationMonth">Expires:&nbsp;</label>
                    <select name="exp_month" id="exp_month">
                        <option value></option>
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            </select>
                            &nbsp;&nbsp;
                            <select name="exp_year">
                            <option value></option>
                            <option value="2014">2014</option>
                            <option value="2015">2015</option>
                            <option value="2016">2016</option>
                            <option value="2017">2017</option>
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                            <option value="2022">2022</option>
                            <option value="2023">2023</option>
                            <option value="2024">2024</option>
                            <option value="2025">2025</option>
                        </select>
                    <p><label for="name_on_card">Name on Card:&nbsp;</label>
                    <input type="text" name="name_on_card" id="name_on_card" placeholder="Full Name" maxlength="35" size="30"/></p> 
                    <p><label for="address1">Address:&nbsp;</label>
                    <input type="text" name="adress1" id="adress1" maxlength="35" size="30"/></p>
                    <p><label for="address2">City:&nbsp;</label>
                    <input type="text" name="adress2" id="adress2" maxlength="35" size="30"/></p>
                    <p><label for="zipcode">Postal Code:&nbsp;</label>
                    <input type="text" name="zipcode" id="zipcode" maxlength="35" size="30"/></p>
                    <p><label for="country">Country:&nbsp;</label>
                    <input type="text" name="country" id="country" maxlength="35" size="30"/></p>
                    <p><label for="email">Email Address:&nbsp;</label>
                    <input type="email" name="email" id="email" maxlength="35" size="30"/></p>
                </form>
            </div>  

CSS

    .accountSettings {
background: url("../images/searchBg.jpg") repeat scroll left top transparent;
border-bottom: 1px solid #d9d9d9;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-border-radius: 6px;
padding: 25px;

 .favContent, .homeIntroWrapper {
width: 700px;
margin: -75px auto 0;
background-color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;

 .tabContainer {
background-color: #fff;
border: 1px solid #cfcfcf;
-webkit-border-radius: 0 4px 4px 4px;
-moz-border-radius: 0 4px 4px 4px;
-o-border-radius: 0 4px 4px 4px;
-border-radius: 0 4px 4px 4px;
/*margin-top: -1px;*/
padding: 20px;
position: relative;
float: left;
width: 100%;
text-decoration: bold;
-moz-box-sizing: border-box;
box-sizing: border-box;
  }

这是 fiddle http://jsfiddle.net/Lucky500/Zkvu7/

所有帮助将不胜感激。

幸运

Answer 1

你可以做的是更新你的 html 结构

<div class="main-content">
    <div class="left-content"></div>
    <div class="right-content">
        <div class="tabContainer clearfix">
        // your content here
      </div>
    </div>
 </div>

或者你可以添加

<div class="tabContainer clearfix">
   <div class="left-content"> </div>
   <div class="right-content">//your input boxes comes here</div>
</div>

添加相应的css

.main-content {
    width: 100%;
}

.left-content {
    width: 30%;
    display: inline-block;
}

.right-content {
    width: 60%;
     display: inline-block;
}

检查 http://jsfiddle.net/Zkvu7/2/