Question

我想用CSS效果设计如下所示的HTML表单。我尝试了很多但是获得了正确的表单并且在CSS中也出现了错误。

    <div class="row">
 <form action="search.php" method="get" name="jobsearch" id="jobsearch">
 <div class="col-md-3 col-md-offset-2">
<label>Keywords</label>
            <input type="text" placeholder="job title, keywords " class="form-control"      name="keyword" value="">
 </div> 
 <div class="col-md-3"> 
   <label>Location</label>
<input type="text" placeholder="enter location here" class="form-control"   name="location" value="">
 </div>

  <div class="col-md-2">

<label>Select Country</label>
<select name="co" class="form-control">
            <option value="us">United States</option>
    <option value="ar">Argentina</option>
    <option value="au">Australia</option>
    <option value="in">India</option>


            </select>
            <script language="JavaScript">
                    DropDownSelect(document.jobsearch.co, 'in');
            </script>

  </div>

      <div class="col-md-2" style="padding-top:25px;">
    <input id="fj" class="btn btn-primary" value="Find Jobs" type="submit">
  </div>


 </form>

点击here！

Answer 1

使用CSS可以通过不同的方式实现此目的。在不了解你所处的环境的情况下，我不能说一种方式比另一种更好。

看看你的编码风格如何使用内联CSS和填充元素我也会在答案中使用这些，尽管我不认为这些始终是最佳解决方案

此外，我相信我们可能会在此末尾错过一个结束div标签。

内联CSS样式是完成此任务的原因。

浮动：左; //如果应用于元素，只要它们有足够的空间放在同一条线上，它们就不会在它们之间断行。

之后，只是让填充正确，以使元素在同一条线上彼此间隔得足够远。

小心地将宽度应用于每个元素以将输入框放在文本下方。同时将表单宽度设置为600px，以便在分辨率更改时不会调整表单大小，而是添加滚动条。（如果您希望更改此行为，则必须找到解决方案。）

 <div class="row">
     <form action="search.php" method="get" name="jobsearch" id="jobsearch" style="width:600px;">
         <div class="col-md-3 col-md-offset-2" style="float:left;width:80px;">
             <label>Keywords</label>
                 <input type="text" placeholder="job title, keywords " class="form-control"      name="keyword" value="">
         </div> 
         <div class="col-md-3" style="float:left;width:80px;padding-left:100px;"> 
             <label>Location</label>
                 <input type="text" placeholder="enter location here" class="form-control"   name="location" value="">
         </div>

         <div class="col-md-2" style="float:left;width:100px;padding-left:100px;">

         <label>Select Country</label>
             <select name="co" class="form-control">
                 <option value="us">United States</option>
                 <option value="ar">Argentina</option>
                 <option value="au">Australia</option>
                 <option value="in">India</option>


             </select>
             <script language="JavaScript">
                    DropDownSelect(document.jobsearch.co, 'in');
             </script>

        </div>

        <div class="col-md-2" style="padding-top:20px;float:left;padding-left:20px;">
            <input id="fj" class="btn btn-primary" value="Find Jobs" type="submit">
        </div>

使用css将HTML表单输入对齐在一行中

1 个答案: