Question

我试图让以下代码段工作，以便选项完全对齐在彼此之下。

＆＃13;

<div id="selectDiv" style="float: left; margin-top: 20px; margin-left: 20px; text-align: right">
<div style="display: block; box-sizing: border-box"><label>Type: </label>
<select style="width: 200px"></select><label style="margin-left: 30px">Created at: </label>     </div>
<br>
<div style="display: block; box-sizing: border-box"><label>Encoding: </label>
<select style="width: 200px"></select><label style="margin-left: 30px">Updated at: </label></div>
<br>
<div style="display: block; box-sizing: border-box"><label>Collation: </label><select style=" width: 200px"></select></div>
</div>

＆＃13;

正如你所看到的那样看起来并不是很正确而且我不确定如何，我一直在试验像显示器和盒子大小这样的东西，你可以看到，但这些似乎都没有为了产生任何效果，我还尝试将文本对齐，使其更好一点，但它仍然不完美。

有什么想法吗？

Answer 1

使用CSS。它比在HTML中编写要好得多。

你是不是喜欢这样的？

<div class="container">

<div class="row">
 <label>Item 1</label>
 <select></select>
 <span class="updated">Updated:</span>
</div>

<div class="row">
 <label>Item 2</label>
 <select></select>
 <span class="updated">Updated:</span>
</div>

<div class="row">
  <label>Item 3</label>
  <select></select>
  <span class="updated">Updated:</span>
</div>

</div>

然后在你的CSS中：

/* Add a row to fit each select item and its title, updated */
.container .row {
  margin-bottom: 10px;
}
.row:last-child {
  margin-bottom: 0
}
/* The text label for your form item */
label {
  padding-right: 5px
}
/* The select dropdown */
select {
  width: 65%;
  margin: auto;
}

参见this jsFiddle

Answer 2

如果您有很多来自循环的项目，例如

然后您可以使用<Table>系统，如：

＆＃13;

#test {
font:11px tahoma; 
border-collapse: collapse; 
text-align:center;
} 

#test td { 
padding: 1px 10px; margin:0;
text-align: center;
border:1px solid #faf0e6;
border-right:1px solid #d8d8d8;
}

#test td:first-child {
color:white;
background : orange; 
width:30%;
}
#test td:nth-child(2) {
width:20%;
}
#test td:nth-child(3) {
text-align:left;
width:50%;
background : #f4f4f4 ;
}
select{
width:100px; 
}

＆＃13;

<table id="test">
    <tr> 
        <!--------->
        <td> Item 1  </td>
        <td> type : .mp4  </td>
        <td> <select></select> Created at: 2017</td>
    </tr>
    <tr>
        <!--------->
        <td> Item 2  </td>
        <td> type : .mov  </td>
        <td> <select></select> Created at: 2017</td>
    </tr>
    <tr>
        <!--------->
        <td> Item 3  </td>
        <td>type : .avi </td>
        <td> <select></select> Created at: 2017 </td>
    </tr>
</table>

＆＃13;

Answer 3

如果可能的话，我建议使用Bootstrap，如果您只是需要在表单中进行基本对齐，则可省去需要编写任何CSS的麻烦。

我用这个例子用Bootstrap稍微改造你的代码;

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_horizontal&stacked=h

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

    <body>
        <div class="container">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-sm-2">Type:</label>
                    <div class="col-sm-4">
                        <select class="form-control"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Encoding:</label>
                    <div class="col-sm-4">
                        <select class="form-control"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Collation:</label>
                    <div class="col-sm-4">
                        <select class="form-control">:</select>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>

html将输入对齐在一起

3 个答案: