html - 如何将下拉列表放在同一行

Question

我想将我的下拉列表元素并排放置在同一行上。

到目前为止它看起来像这样:

screenshot

<div id="calltoaction-form" class="teaser-form">
            <div class="form-title">
              <h3>TITLE</h3>
            </div>
            <form id="contact_form" action="_contact-us.php" method="post">
            <h4 class="form-header">Personal details</h4> 
              <div class="details-form-section">
                <input id="name" name="name" type="text" placeholder="Your name">
              </div>
              <div class="details-form-section">
                <input id="email" name="email" type="text" placeholder="Your email">
              </div>
              <div class="details-form-section">
                <input id="phone" name="phone" type="number" placeholder="Your phone number" min="10"required>
              </div>
              <div class="details-form-section">
                <select id="type" name="type">
                <option value=""> - tell us what you need - </option>
                <option value="Quote">Quote</option>
                <option value="Sample request">Sample request</option>
                <option value="Customization">Customization</option>
                <option value="Support">Support</option>
                </select>
              </div>
              <h4 class="form-header">Personal details</h4> 
              <div class="quote-form-section">
               <select id="type" name="type">
                <option value="">type</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                </select></div>
               <div class="quote-form-section">
                <select id="type" name="type">
                <option value="">Quantity</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                </select></div>
                 <div class="quote-form-section">
                 <select id="type" name="type">
                <option value="">size</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                </select>
              </div>
               <div class="custom-form-section"><h4>test</h4>
               Please upload a screenshot .
                <input type="file" name="fileupload" value="fileupload" id="fileupload">
              </div>
              <div class="custom-form-section"><h4>Details</h4>
              Please provide more information below.
                <textarea id="message" class="removetext" name="message" cols="50" rows="3" placeholder="Details ..."></textarea>
              </div>

              <br>
              <input type="submit" name="_submit" class="btn" value="Submit!">
            </form>
          </div>

这是代码 http://jsfiddle.net/zbfw3yzL/ ，这也是我想解决的另一个问题 - jsfiddle.net/6ky3dw6s/

Answer 1

在您的 css 中找到 quote-form-section 并将其更改如下:

.quote-form-section {
    margin: 15px 0 0 0;
    display: inline-block;
    float: left;
    width: 30%
}