2017-03-16 50 views
0

即時嘗試更改我的表的設計。 ATM我有這樣的: enter image description hereCSS表格上方輸入字段

我希望得到的東西是這樣的:

enter image description here

我想上面的輸入框的標籤,讓我看起來像的例子。 這是我的代碼:

<table class="table"> 
     <tbody> 
     <tr> 
      <td>Title:</td> 
      <td> 
       <input type="text" id="title"> 
      </td> 
      <td>Position: </td> 
      <td> 
       <input type="text" id="position"> 
      </td> 
      <td>Input Type:</td> 
      <td> 
       <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?</td> 
      <td> 
       <input type="checkbox" id="required"> 
      </td> 
     </tr> 
     </tbody> 
    </table> 

乾杯和快樂的編碼!

回答

1

只需在上面再添加一行!

<table class="table"> 
 
     <tbody> 
 
     <tr> 
 
     <td>Title:</td> 
 
     <td>Position: </td> 
 
     <td>Input Type:</td> 
 
     </tr> 
 
     <tr> 
 
      
 
      <td> 
 
       <input type="text" id="title"> 
 
      </td> 
 
      
 
      <td> 
 
       <input type="text" id="position"> 
 
      </td> 
 
      
 
      <td> 
 
       <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> 
 
       <input type="checkbox" id="required"> Required ? 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table>

+0

謝謝,它的工作! –

+0

@Morgs:感謝您的編輯。我alos開始爲'Required'的列,但用戶似乎想要複選框旁邊的文本「必需」... –

0

不用擔心朋友

簡單的使用<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> 
0

只需使用李NE破冰組件<br>

<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>

0

我想告訴你,沒有人使用表中的這些天,這樣的東西。切換到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>,當涉及到佈局網頁上的東西。快樂學習!

+0

謝謝,我看看那個! –