html中div文本框的大小,关于html：获取文本框以填充其容器div宽度的100％

最新推荐文章于 2023-07-05 12:27:49 发布

weixin_39992660

最新推荐文章于 2023-07-05 12:27:49 发布

阅读量305

点赞数

文章标签： html中div文本框的大小

我有一个表单，在同一行中有一个文本框，后跟一个提交按钮。

我希望"提交"按钮有点小，但文本框要占用所有剩余宽度。

因此，我只想拉伸文本框以填充所有宽度，但要保留按钮所需的宽度。

但是，目前，我的UI如下所示：

注意文本框和按钮之间的所有空白水平空间。

我尝试在CSS中将文本框的宽度设置为100％，但是什么也没有发生。

以下是我的HTML。

id="txtUserURL"

placeholder="Stack Overflow URL" />

如您所见，我正在使用引导类row和md-col-x来定义容器divs的布局。我希望input控件重新显示我的文本框，以填充其容器div宽度的100％。

这是我的CSS：

#rowFormContainer {

padding-left: 7px;

padding-right: 7px;

padding-bottom: 10px;

border-width: 2px;

border-style: dashed;

}

#divUserURLContainer {

border-width: 2px;

border-style: solid;

border-color: red;

padding: 0px;

}

#txtUserURL {

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

color: cadetblue;

font-size: 22px;

padding-left: 7px;

padding-right: 7px;

padding-top: 4px;

padding-bottom: 4px;

border-radius: 7px;

width: 100%;

}

您可以将代码发布到JSBin，codepen或类似的东西上吗？

您可以像这样简单地使用flex：

form {

display: flex;

}

input[type="text"] {

flex: 1

}

谢谢你们俩实际上，自从你们俩都发布了答案以来，我一直在努力尝试用我的代码来尝试两种解决方案。由于某种原因，他们俩都不为我工作。到现在。我沮丧地撞了个头，我才发现为什么他们没用。这是因为层次结构中的另一个CSS文件将输入控件上的max-width设置为280px。我删除了，您的解决方案都起作用了。不过，我只能选择一个作为正确答案。而且由于这要简单得多，所以我选择了它。不过，我都喜欢你的答案。非常感谢。

您没有正确使用本机引导程序功能-通过在输入中添加类" form-control"，您将无法使用flex来实现全宽输入。请注意，我有一个.form-group包装器，并添加了一个标签-最好在您的输入中包含一个标签-并且使用" control-label"类，该类允许引导程序在出现错误时将其着色为红色(并且" .has-error"类将应用于表单组。

我在两个div周围添加了边框。并不是说div内有填充-因为那是引导程序自然提供的div的15px填充-并不是因为输入没有扩展整个宽度。

并遵循注释的疯狂精神-我已经删除了填充以显示这种操作的含义-仅通过删除左侧和右侧的填充-我认为这不是非常理想的-但我接受OP要求全宽div。无论多么疯狂。

请注意，由于nsnippet编辑器的大小-我不得不将其设置为col-xs-10 / col-xs-2-但在视口断点处仍然存在相同的前提。

Label text

#divGetButtonContainer {

padding-top:24px;

padding-bottom: 16px;

}

#divUserURLContainer,

#divGetButtonContainer {

border: solid 1px red;

padding-left:0;

padding-right:0;

}

#divGetButtonContainer{

border-color: blue;

}

Label text

提交按钮在哪里？ OP没有搜索使输入文本全角

现在，添加按钮后，您将复制OP的相同行为。您有空格，他说：So, Id like to just stretch the textbox to fill all the width

我的评论并不荒谬。请仔细阅读问题，OP，您和我都知道如何使用Bootsrap。现在他不希望这些来自引导程序的空间在那里。问题不在于引导程序的使用

@Temani Afif-您可能应该了解Bootstrap CSS的复杂性，并了解指定div的hte列的自然样式是在任一侧添加15px填充。这说明了div.row所应用的侧面上的-15px页边距。因此，输入IS会扩展div的整个宽度-减去Bootstrap填充。这当然可以删除-但是样式规则-但这是一个原因。该答案将按要求应用输入的完整宽度。如果要删除填充-padding-left：0; padding-right：0

@TemaniAfif-并且由于评论的启发而疯狂-我已经删除了填充以显示这种操作的含义-仅通过删除左侧和右侧的填充-我认为这不是很理想-但我接受OP要求的div的整个宽度。无论多么疯狂。

像这样没有必要对我无礼。 ...只需再次阅读问题，尤其是这两行内容：Id like the submit button to be a little small but the textbox to take up **all of the remaining width.** So, Id like to just stretch the textbox to fill **all the width** but for the width required by the button.如果您仍然认为我的评论很荒谬，我无话可说...

谢谢你们俩实际上，自从你们俩都发布了答案以来，我一直在努力尝试用我的代码来尝试两种解决方案。由于某种原因，他们俩都不为我工作。到现在。我沮丧地撞了个头，我才发现为什么他们没用。这是因为层次结构中的另一个CSS文件将输入控件上的max-width设置为280px。我删除了，您的解决方案都起作用了。不过，我只能选择一个作为正确答案。由于flex one更为简单，因此我选择了它。不过，我都喜欢你的答案。非常感谢。