我的网页中有7个下拉列表，我想在相应的lable下方显示lable标签，下拉列表。如何做到这一点。
例如，
文件名
<option>1..</option>
<option>2..</option>
<option>3..</option>
<option>4..</option>
<select>
浏览器
<option>chrome</option>
<option>firefox</option>
<option>...</option>
<option>...</option>
在这里，我想如下显示
Filename Browser .. .. ..
dropdown dropdown dropdown .. ..
如何做？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Filename</th>
<th>Browser</th>
<th>Value3</th>
<th>Value4</th>
<th>Value5</th>
<th>Value6</th>
<th>Value7</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="browser">
<option>Chrome</option>
<option>Firefox</option>
<option>IE</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Filename</th>
<th>Browser</th>
<th>Value3</th>
<th>Value4</th>
<th>Value5</th>
<th>Value6</th>
<th>Value7</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="browser">
<option>Chrome</option>
<option>Firefox</option>
<option>IE</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
<td>
<select name="filename">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
您只需要将select元素包装在label中即可。然后，要将它们并排放置，您需要将display: inline-block用于<label>标签，而display: block用于<select>标签。
label { display: inline-block }
select { display: block }<label>Filename
<select>
<option>option one</option>
<option>option two</option>
</select>
</label>
<label>Browser
<select>
<option>option one</option>
<option>option two</option>
</select>
</label>尝试将所有内容放入table中，如下所示。我之所以不使用table元素，但像表格一样的div是出于响应目的。
html：
<div class="table">
<div class="cell">
<label>Filename</label>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="cell">
<label>Browser</label>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
...
</div>
CSS：
.table {
display:table;
table-layout:fixed; /* this will make all your cells equal*/
}
.cell {
display:table-cell;
}
这是一个工作JSFIDDLE：https：//jsfiddle.net/scooterlord/19pbq1cc/
根据您的label大小，您可能需要添加到.cell CSS：
.cell {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
此外，要使select样式使它们全部相等：
select {
display:block;
width:100%;
}
在这里更新了小提琴：https：//jsfiddle.net/scooterlord/19pbq1cc/1/