css：使没有表格的最大宽度的中心元素可用

Question

我很难将中心元素放在一行中以获取最大可用宽度。我的核心元素是url_submit_input元素，在此示例中为：

div.url_submit_wrapper {
  width: 100%;
}
span.url_submit_title {
  display: inline-block;
}
.url_submit_input {
  display: inline-block;
  width: 100%;
}
.url_submit_button {
  display: inline-block;
}

<div class="url_submit_wrapper">
  <span class="url_submit_title">URL:</span>
  <input class="url_submit_input" name="url" type="text">
  <input class="url_submit_button" type="submit" value=" Submit ">
</div>

我想要的输出是：

URL: [                  maximum width                ] [SUBMIT]

此外，当用手机查看时（即屏幕宽度<600的媒体查询），我需要它看起来像这样：

URL:
[                       maximum width                ]
[ SUBMIT ]

如何在不依赖表格的情况下完成这项工作？我发布的代码只呈现移动版本，而不是桌面版。

Answer 1

您可以使用.url_submit_wrapper {display: inline-flex;}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/