表单标签占用的空间超出了需要

时间：2017-08-10 17:18:20

标签： html5 css3 html-table

我的表单布局有三列：第一个是标签，第二个是输入，第三个是单位（cm，kg等）。一切都在表格中的表格中给出。但是第一列需要更多（水平）空间。它没有填充，边距和边框。这是我的代码：

＆＃13;
＆＃13; 
if ( (((double) points) / tries) > hiScore) {
                    hiScore = ((double) points) / tries;
                    hiPoints = points;
                    hiTries = tries;
＆＃13; 
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;
}
＆＃13;
＆＃13;
＆＃13;

你能帮我找出原因吗？

顺便说一句，我试过给<!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}标签来获取其中任何内容的宽度......

3 个答案:

答案 0 :(得分：0)

如果您将border-collapse: collapse;添加到table，那会有所帮助......：

body {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	color: #222222;
}

table {
	width: 100%;
	white-space: nowrap;
    border-collapse: collapse;
}

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>

答案 1 :(得分：0)

你要求的是不可能的。

如果您的表格设置为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。

请参阅运行演示

＆＃13;
＆＃13; 
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 */
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-1)

table{table-layout: fixed;}
td:first-of-type{width: your-width;}
相关问题
最新问题