页面校样随着它的规模而变化

Question

我有demo-page of my site 当我将比例从100％更改为150或更改为50或其他时，元素会改变它的定位。有什么建议我怎么能阻止这个？ 最大的问题是部分

<form method='POST' action='/utilities.php'>Показания за период по <input name='demoCalendar' id='demoCalendar' type='text' class='dateInput'/><input type='submit' class='btn btn-primary' value='Обновить'/></form>

如果是150％，则元素是另一个。有什么建议？ 此外，我不能做那个小提琴，因为问题在于整个网站。 例：

Answer 1

一般来说，网页更是一个问题，如果文字不适合该行，那么它必须换行到下一行。

有一种可能的解决方案，使用绝对定位来保留堆栈中的所有项目，但这会导致文本字段和按钮重叠在顶部的文本，如屏幕截图所示。

如果这是您想要的，您可以在Web检查器上看到必要的编辑。这是原始输出，但您需要将style属性转换为使用CSS类。

<div id="readings">
  <form method="POST" action="/utilities.php" style="position: relative; height: 40px; width: 100%;">
    <p style="position: absolute; left: 0;">Показания за период по</p>

    <input name="demoCalendar" id="demoCalendar" type="text" class="dateInput" style=" position: absolute; right: 100px;">

    <input type="submit" class="btn btn-primary" value="Обновить" style=" position: absolute; right: 0;">
  </form>
</div>

Answer 2

我已经为元素添加了min-width。 像这样：

div#readings
{
    background-color: #F4F4F1;
    width:110%;
    font-size: 20px;
    min-width: 550px;
}

现在元素不会包裹下一行。