我的表单布局为三列:第一列是标签，第二列是输入，第三列是单位(cm、kg 等)。一切都已在表格中的表格内给出。但是第一列比它应该占用更多的(水平)空间。它没有填充、边距或边框。这是我的代码:
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
color: #222222;
}
table {
width: 100%;
white-space: nowrap;
}
input {
background-color: #DACBDF;
padding: 8px 10px 8px 10px;
width: 91.5%;
font-family: Georgia;
font-size: 13px;
border: 1px solid #EEEEEE;
}
input:hover {
border: 1px solid green;
}
input:focus {
background-color: #DACBFF;
border: 1px solid #FF0000;
}
input[type="submit"] {
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 8px 15px 8px 15px;
width: auto;
border: 1px solid #EEEEEE;
color: #222222;
}
input[type="submit"]:hover {
background: #4691A4;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#wgCalc, #hsCalc, #bfCalc, #ccCalc, #apCalc {
height: 33px;
width: 16.5%;
z-index: 2;
float: left;
margin-left: 8px;
}
#container {
background-color: #EEEEEE;
padding: 10px 10px 10px 10px;
border: 3px solid #888888;
width: 30%;
z-index: 1;
margin: 0px auto;
}
#container h3 {
text-align: center;
}
.menu {
width: 30%;
height: 35px;
margin: 60px auto;
margin-bottom: 0px;
}
.tabOn {
background-color: #EEEEEE;
border-bottom: 3px solid #EEEEEE !important;
border: 2px solid blue;
font-weight: bold;
text-align: center;
}
.tabOff {
background-color: #BBBBBB;
border-bottom: 3px solid #888888 !important;
border: 2px solid navy;
text-align: center;
}
.tabOff a {
color: #4422FF;
text-decoration: none;
}
.tabOff a:hover {
color: #4691A4;
}
.image-holder {
width: 40%;
margin: 0px auto;
}
.warning {
font-weight: bold;
color: #FF0000;
}
.result {
font-weight: bold;
}<!DOCTYPE HTML>
<html>
<head>
<title>Body Fat Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="fcalc.js"></script>
</head>
<body>
<div class="menu">
<div id="wgCalc" class="tabOff"><a href="weightGoal.html">Weight Goal</a></div>
<div id="hsCalc" class="tabOff"><a href="howSexy.html">How Sexy</a></div>
<div id="bfCalc" class="tabOn">Body Fat</div>
<div id="ccCalc" class="tabOff"><a href="circExp.html">Circ. Expect.</a></div>
<div id="apCalc" class="tabOff"><a href="absPower.html">Absolute Power</a></div>
</div>
<div id="container">
<div class="image-holder">
<img src="EnData.png" width="100%" />
</div>
<h3>BODY FAT CALCULATOR</h3>
<form id="bodyFatCalc" name="bodyFatCalc" method="post" autocomplete="off" onSubmit="formData(); return false;">
<table>
<tr>
<td><label>Height:</label></td>
<td><input type="text" id="height" name="height" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Navel:</label></td>
<td><input type="text" id="navel" name="navel" value="" maxlength="5" /></td>
<td>cm</td>
</tr><tr>
<td><label>Neck:</label></td>
<td><input type="text" id="neck" name="neck" value="" maxlength="4" /></td>
<td>cm</td>
</tr><tr>
<td><label>Weight:</label></td>
<td><input type="text" id="weight" name="weight" value="" maxlength="4" /></td>
<td>kg</td>
</tr><tr>
<td></td>
<td><input type="submit" id="calculate" name="calculate" value="Calculate" /></td>
<td></td>
</tr>
</table>
</form>
<p id="warning" class="warning"></p>
<p id="result_p" class="result"></p>
<p id ="result_w" class="result"></p>
</div></body>
</html>你能帮我找出原因吗？
顺便说一句，我试着给 td {width: auto} 但它只会让情况变得更糟。
更新:看来我的问题不够清晰和简洁。我想要的是 td 标签占据其中任何内容的宽度......
最佳答案
您所要求的是不可能的。
如果您的表格设置为具有 width:100%，则 td 将加宽以占用可用空间，以便表格使用其规定的宽度。
您可能需要做的是定义哪些列需要具有可变宽度，哪些列将是静态的。 (不能两全其美)
类似的东西:
tr > td:last-of-type, tr > td:first-of-type {
width: 50px !important; /* adjust width as necessary to fit longest word */
}
/* changed this to 'input' */
input{
width: 95%;
/* other properties */
}
我将您给定的代码缩减为 MCVE .
查看运行演示:
table {
width: 100%;
white-space: nowrap;
}
input {
background-color: #DACBDF;
padding: 8px 10px 8px 10px;
width: 95%;
font-family: Georgia;
font-size: 13px;
border: 1px solid #EEEEEE;
}
input:hover {
border: 1px solid green;
}
input:focus {
background-color: #DACBFF;
border: 1px solid #FF0000;
}
input[type="submit"] {
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 8px 15px 8px 15px;
width: auto;
border: 1px solid #EEEEEE;
color: #222222;
}
input[type="submit"]:hover {
background: #4691A4;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
tr > td:last-of-type, tr > td:first-of-type {
width: 50px !important; /* adjust width as necessary to fit longest word */
}<table>
<tr>
<td><label>Height:</label></td>
<td><input type="text" id="height" name="height" value="" maxlength="5" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Navel:</label></td>
<td><input type="text" id="navel" name="navel" value="" maxlength="5" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Neck:</label></td>
<td><input type="text" id="neck" name="neck" value="" maxlength="4" /></td>
<td>cm</td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" id="weight" name="weight" value="" maxlength="4" /></td>
<td>kg</td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="calculate" name="calculate" value="Calculate" /></td>
<td></td>
</tr>
</table>关于html - 表单标签占用的空间超出其需要，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45619873/