Question

我试图改变我的表的设计。我有这个：

我想得到这样的东西：

我想在输入框上方找到标签，这样我就像是一个例子。这是我的代码：

SELECT * FROM t_object where t_object.PDATA5 like '%Test%'

欢呼和快乐的编码！

Answer 1

只需在上方添加另一行！

＆＃13;

<div id="wrapper_body_all"> 
<div class="main-wrap">
    <!--start : #rightProduct-->
    <div class="section-col-right">         
        <!--start : rec_product -->
        <div class="rec_product">
        <!-- end : rec_product -->
        <div class="rec_product">
            <div class="section-products-box">
                <div class="hitproduct-body">
                    <ul class="hitproduct-list list">
                       <!--start : product-list--> 
                        <li>
                            <div class="item-border list">
                                <div class="item-image">
                                        <a href="//www.tarad.com/product/5913180" title="ลำโพงน่ารัก dog">
                                            <img src="//img.trd.cm/120/120/sumpow/img-lib/spd_20140314140410_b.jpg"
                                            alt="ลำโพงน่ารัก dog" data-pagespeed-url-hash="3676782613" 
                                            onload="pagespeed.CriticalImages.checkImageForCriticality(this);">
                                        </a>
                                </div>
                                <div class="item-details">                                          
                                    <div class="product-name">
                                        <a href="//www.tarad.com/product/5913180" title="ลำโพงน่ารัก dog">ลำโพงน่ารัก dog</a>
                                    </div>
                                </div>
                            </div>      
                        </li>
                        <!--end : product-list-->
                        <!--start : product-list--> 
                        <li>
                            <div class="item-border list">
                                <div class="item-image">
                                    <a href="//www.tarad.com/product/6755464" title="Brewdog Magic Stone Dog - 330 ml - 5">
                                        <img src="//www.tarad.com/images/web_main/default150x150.gif" 
                                        alt="Brewdog Magic Stone Dog - 330 ml - 5" data-pagespeed-url-hash="2123596038" 
                                        onload="pagespeed.CriticalImages.checkImageForCriticality(this);">
                                    </a>
                                </div>
                                <div class="item-details">                                          
                                    <div class="product-name">
                                        <a href="//www.tarad.com/product/6755464" title="Brewdog Magic Stone Dog - 330 ml - 5">
                                            Brewdog Magic Stone Dog - 330 ml - 5</a> 
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!--end : product-list-->
                        ....
                        ....
                        ....
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

只需使用换行符元素<br>

即可

＆＃13;

<table class="table">
  <tbody>
    <tr>
      <td>Title: <br>
        <input type="text" id="title">
      </td>
      <td>Position: <br>
        <input type="text" id="position">
      </td>
      <td>Input Type: <br>
        <select id="input">
          <option value="1">Drop-down</option>
          <option value="2">Radio Buttons</option>
          <option value="3">Checkbox</option>
          <option value="4">Multiple Select</option>
        </select>
      </td>
      <td>Required? <br>
        <input type="checkbox" id="required">
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 3

不要担心朋友

简单使用<br>代码

喜欢这个

<div class="col_3">
<label>Title</label></br>
<input type="text"/>
</div>
<div class="col_3">
<label>Title</label></br>
<input type="text"/>
</div>
<div class="col_3">
<label>Title</label></br>
<input type="text"/>
</div>

<style>

.col_3{
width:31.33%;
float:left;
}
.col_3 label{
wisth:100%;
}
.col_3 input{
width:100%;
}

</style>

Answer 4

我想告诉你，这些天没人用这种东西。切换到div以获得更好的效果。

使用<br>是可以的，但您也可以将这些label元素设置为块级别，以自动获取可用宽度，并按显示顺序将其旁边的input推送到它们旁边

您可以在表单中使用div来创建柱状方式;提供一个width，将它们向左浮动，添加一些填充用于分离和空白区域，你就完成了！

您也可以利用CSS media queries，使其更加灵活。

以下是一些代码，请亲自看看。

/* Tweaking the box */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Avoid using `<br`, push the label to block-level */
.label-block {
  display: block;
  margin-bottom: 5px;
}

/* Column-settings for the form */
.job-form-col {
  padding: 10px;
  border: 1px solid #eee;
  border-width: 0 0 1px;
}

.job-form-col:after {
  content: "";
  clear: both;
  display: table;
}

.job-form-col:last-child {
  border-bottom-width: 0;
}

/* Form column rendering settings for different screen sizes */
@media only screen and (min-width: 768px) {
  .job-form-col {
    float: left;
    border-width: 0 1px 0 0;
  }
}

@media only screen and (min-width: 1024px) {
  .job-form-col {
    width: 25%;
    padding: 1.25em;
  }
  
  .job-form-col:nth-child(4n) {
    border-width: 0;
  }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .job-form-col {
    width: 50%;
    padding: .75em;
  }
  
  .job-form-col:nth-child(2n) {
    border-width: 0;
  }

}

<form action="" class="job-form">

  <div class="job-form-col">

    <label class="label-block" for="title">Option Title</label>
    <input type="text" id="title">

  </div>
  <!-- .job-form-col -->

  <div class="job-form-col">

    <label class="label-block" for="position">Position</label>
    <input type="text" id="position">

  </div>
  <!-- .job-form-col -->

  <div class="job-form-col">

    <label class="label-block" for="drop-down">Drop-down</label>
    <select name="" id="drop-down">
      <option value="">Lorem.</option>
      <option value="">Alias.</option>
      <option value="">Odit!</option>
      <option value="">Totam!</option>
      <option value="">Numquam.</option>
    </select>
    <!-- #drop-down -->

  </div>
  <!-- .job-form-col -->

  <div class="job-form-col">

    <input type="checkbox" id="required">
    <label for="required">Required?</label>

  </div>
  <!-- .job-form-col -->

</form>
<!-- .job-form -->

在网络上布局时，开始使用<div> <table>。快乐学习！

CSS标签在表格的输入字段上方

4 个答案: