css 如何将输入拉伸到div的宽度而不影响其前面的span元素的大小

huwehgph 于 2022-12-30 发布在其他

关注(0)|答案(1)|浏览(210)

为了澄清，我有一个带有span和input的表单：

<form onSubmit={e => handleSubmit(e)}>
                    <Box className='form_box'>
                        <span>
                            guest@website.com:: {'~ >>'}
                        </span>

                        <input value={user_input} onChange={e => handleChange(e.target.value)} />
                    </Box>
                </form>

.form_box{
    background-color: beige;
    color: white;
    display: flex;
    align-items: center;

    input{
        border: none;
        outline: none;
        color: black;
        background-color: white;
    }

}

我想让input元素伸展到它的父元素'form_box' div的整个宽度，当我尝试使用width: 100%时，它会导致input字段前面的span元素伸展到两行，就好像里面的文本对于容器来说太长了。
澄清度：
一个二个一个一个
任何帮助与css解决方案非常感谢!

css

来源：https://stackoverflow.com/questions/74956151/how-to-stretch-an-input-to-width-of-div-without-it-having-affect-the-size-of-a-s

1条答案

按热度按时间

20jt8wwn1#

您可以使用弹性框来扩展框中的最后一项，以填充剩余空间：

<form onSubmit={(e) => handleSubmit(e)}>
      <Box
        className="form_box"
        sx={{
          display: "flex",
          flexDirection: "row",
          // make last item in flexbox fill remaining space
          "& > :last-child": { flexGrow: 1 },
        }}
      >
        <span>guest@website.com:: {"~ >>"}</span>

        <input
          value={user_input}
          onChange={(e) => handleChange(e.target.value)}
        />
      </Box>
    </form>

或者，如果要将样式保存在单独的文件中：

.form_box {
  background-color: beige;
  color: white;
  display: flex;
  flex-direction: "row";
}

.form_box > :last-child {
  flex-grow: 1;
}

input {
  border: none;
  outline: none;
  color: black;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  width: 1000;
}

赞(0）回复(0）举报 2022-12-30

我来回答

css 如何将输入拉伸到div的宽度而不影响其前面的span元素的大小

1条答案

相关问题

热门标签

最新问答