Question

我试图完成下图所示的内容（帖子底部）。我只是在搜索字段所在的顶部工作。我有几个问题; 1）这是正确的为什么在html上制作列？ 2）我怎样才能完成将图标放在div中心的那条灰线，我试图将边框放到表格的div中并放入一个奇怪的地方。另外，当我用箭头添加按钮时，它会一直向右移动。即使我调整屏幕大小，它也必须始终位于中心

＆＃13;

#searchForm{
  padding-top: 50px;
  margin-left: 18%;
  width: 100% !important;
}
.column1{
  
}
.column2{

}
.column3{

}.column4{
  
}
.columns{
  margin-right: 50px;
  maring-left: 50px;
  height: 200px;
  float: left; 
}
.searchValue{
  width: 200px;
  height: 2.1em;
  margin-bottom: 19px;
}
.mySelects{
   -webkit-appearance: menulist-button;
   height: 2.4em;
  width: 200px;
}
.radioButtonsSearch{
  margin-bottom: 50px;
}
.btns{
  background-color: #14477E;
  color: #FFE45E;
  width: 150px;
  height: 2.4em;
  font-weight: bold;
}
.sliderUp{
  background-color: #14477E;
  color: #FFE45E;
  width: 40px;
  padding-top: 10px;
  height: 2.4em;
  font-weight: bold;
  font-size: 16px;
  position: 
  margin-left: 60%;
}

＆＃13;

<section class="">
  <center>  
    <form id="searchForm">
          <div class="column1 columns">
            <div class="radioButtonsSearch">
              <input type="radio" name="searchType"  value="house" checked>House
              <input type="radio" name="searchType"  value="house">Repair parts<br/>
            </div>
              Mile Post Number<br/>
            <input type="text" name="milePost" class="searchValue" placeHolder="Enter the mile post number" />
          </div>
          <div class="column2 columns">				
            Project Number<br>
            <input type="text" name="projectNumber" class="searchValue" placeHolder="Enter the project number" /><br/>
            Serial Number<br/>
            <input type="text" name="serialNumber"  class="searchValue" placeHolder="Enter the serial number" /><br/>
            <button class="btns">Search</button>
          </div>
          <div class="column3 columns">							
            House Size<br/>
            <select class=" mySelects searchValue">
              <option value="volvo" disabled selected>Select one</option>
              <option value="volvo">4x4</option>
              <option value="saab">6x6</option>
              <option value="opel">8x8</option>
            </select><br/>
            Start Date<br/>
            <input type="text" name="serialNumber"  class="searchValue" placeHolder="Enter the serial number" /><br/>
            <button type="input" class="btns">Clear</button>
          </div>
          <div class="column4 columns">							
            Status<br/>
            <select class="searchValue mySelects" style="line-height: 24px;">
              <option value="volvo" disabled selected>Select one</option>
              <option value="volvo">Hold</option>
              <option value="saab">xxx</option>
              <option value="opel">xxx</option>
            </select><br/>
            Asset ID<br/>
            <input type="text" name="assetID" class="searchValue" placeHolder="Enter the asset ID" /><br/>
          </div>  
        </form>
    <br>
  </center>
</section> 
<button class="sliderUp">^</button>

＆＃13;

这是我的演示

这就是我想要完成的事情 wireframe

谢谢！

Answer 1

1）你的专栏对你正在做的事情完全正常。如果您不介意学习新技术，请尝试查看Bootstrap。它目前非常受欢迎，并且会自动处理屏幕大小调整，同时允许移动元素的断点（假设您在移动设备上并希望只有一列而不是两列，您可以这样做！）尽管您可以随时创建移动特定网页，如果在移动设备上，则会加载。）

2）这可能不是最好的方法，但你可以像这样得到你的形象：

<div width=100%>
  <hr width=45%; style="display:inline-block">
  <button style="display:inline-block" class="sliderUp">^</button>
  <hr width=45%; style="display:inline-block">
</div>

内联样式只是为了便于查看。

希望这有帮助！

Answer 2

我会研究一下flexbox的网格布局。浏览器支持正在增长，自动前缀变得越来越普遍。

使用flexbox，您可以轻松地水平和垂直居中，无论您想要什么。

这是一个很好的tutorial让你入门。

slideUp Div和html列

2 个答案: