Question

我只是想让标签和文本框填充表格的宽度。我不敢相信我在这个简单的问题上浪费了多少时间。使用表将是如此简单。

这是简单的HTML：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<style>
		* { box-sizing: border-box; }
	</style>
</head>
<body>
	<form style="width: 500px; border-style:solid; border-color: red;">
		<label for="Txt">Label:</label>
		<input id="Txt" type="text" style="width: auto;" />
	</form>
</body>
</html>

这是它的外观：

我只想让我的文本框填满表单的其余部分（文本框右侧的空白区域。我尝试了100％，display：table等。我想用HTML和仅限于CSS（没有JavaScript或jQuery），并且无需费心去处理像素数或百分比，直到看起来正确为止。

谢谢。

Answer 1

这是我的解决方法

使用width: calc(100% - 82px);作为输入宽度

82px等于标签的宽度和输入的（1px边框* 2）

* {
  box-sizing: border-box;
}

label {
  width: 80px;
  display: inline-block;
}

input {
  display: inline-block;
  width: calc(100% - 82px);
  border: 1px solid #ccc;
  font-size: 16px;
}

<form class="back">
  <label>Test Label</label><input type="text" name="search" class="">
</form>

Answer 2

您应该使用这种简单的方法。

请尝试：width: calc(100% - 45px) !important;进入input#Txt类。

希望获得帮助。

让我知道进一步的澄清。

input#Txt {
width: calc(100% - 45px) !important;
}

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <style>
        * { box-sizing: border-box; }
    </style>
</head>
<body>
    <form style="width: 500px; border-style:solid; border-color: red;">
        <label for="Txt">Label:</label>
        <input id="Txt" type="text" style="width: auto;" />
    </form>
</body>
</html>

Answer 3

您可以通过定义网格模板来使用grid布局。

这是指向Mozilla Docs for CSS Grid的链接。

* { box-sizing: border-box; }
.form {
  width: 500px;
  border-style:solid;
  border-color: red;
  display: grid;
  grid-template-columns: min-content auto;
}

<form class="form">
  <label for="Txt">Label:</label>
  <input id="Txt" type="text" />
</form>

Answer 4

Flexbox方法：

form {
  display: flex;
}

input {
  flex: 1;
}

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <style>
    * {
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <form style="width: 500px; border-style:solid; border-color: red;">
    <label for="Txt">Label:</label>
    <input id="Txt" type="text" style="width: auto;" />
  </form>
</body>

</html>

Answer 5

使用浏览器安全的CSS规则，您可以设置标签和输入的宽度，然后以这种方式将它们设置为abs(i)!=i。

i<0

扩展输入以填写表格

5 个答案: