Question

我的真实项目没有使用嵌入式样式或背景色。这些已添加仅用于故障排除。

从下面的代码开始，一切都很好，除了第二个文本输入感觉有点短。所有其他文本输入会拉伸以填充浏览器窗口。我不希望它那样做，但是我只想填充我用红色上色的部分。因此，请一直伸展到右侧，但不要一直伸展到左侧。

<label for="phoneNumber">Home Phone</label>
<div style="background:blue;">
	<div style="background:yellow; float:left;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
	<div style="background:red;"><input type="tel" name="phone" id="phoneNumber" autocomplete="tel"></div>
</div>

鉴于我希望文本输入能填充父div的100％（即红色区域），因此我的第一个直觉是编写style="width:100%;"，但这并没有理想的结果。见下文。

<label for="phoneNumber">Home Phone</label>
<div style="background:blue;">
	<div style="background:yellow; float:left;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
	<div style="background:red;"><input style="width:100%;" type="tel" name="phone" id="phoneNumber" autocomplete="tel"></div>
</div>

如何使文本输入填充为红色显示的区域？

Answer 1

像下面一样使用flex。

在父div上添加display: flex，在第二个输入的父div上添加flex: 1 0 auto;，在第二个输入的宽度上添加100％。

<label for="phoneNumber">Home Phone</label>
<div style="background: :blue; display: flex;">
  <div style="background:yellow;;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
  <div style="background:red;flex: 1 0 auto;">
    <input type="tel" name="phone" id="phoneNumber" autocomplete="tel" style="    width: 100%;"></div>
</div>

Answer 2

您尝试这样做吗？

std::string getIPAddress()
{

    try
    {
        curlpp::Cleanup myCleanup;
        {
            std::ostringstream ip_address_stream;
            ip_address_stream << curlpp::options::Url("http://api.ipify.org");
            ip_address = ip_address_stream.str();
            return ip_address;
        }
    }
    catch(curlpp::RuntimeError &e)
    {
        std::cout << e.what() << std::endl;
    }
    catch(curlpp::LogicError &e)
    {
        std::cout << e.what() << std::endl;
    }

}

Answer 3

正如我在您的代码中看到的那样，您已将width:20px;赋予了一个div（黄色），因此父div（蓝色）中的剩余空间为不是100％，因此当您给div（red）内部的输入输入width：100％，它分解并到达下一行以取100％；宽度。因此，给定宽度小于100％；

为您的理解，我已经更新了宽度，请检查以下代码。

<label for="phoneNumber">Home Phone</label>
<div style="background: :blue;">
  <div style="background:yellow; float:left;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
  <div style="background:red;"><input style="width:94%;" type="tel" name="phone" id="phoneNumber" autocomplete="tel"></div>
</div>

Answer 4

<label for="phoneNumber">Home Phone</label>
<div style="background: :blue;width:100%;">
  <div style="background:yellow; float:left;width: 7%;">(
  <input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)
  </div>
  <div style="background:red;float: right;width: 93%;">
    <input  type="tel" name="phone" id="phoneNumber" autocomplete="tel" style="    width: 100%;">
  </div>
</div>

style =“ width：100％”正在拉伸包含的div。我不想要

4 个答案: