Question

美好的一天，所以我有一个用div标签包裹的登录功能。如果调整大小，我只想冻结div。我尝试添加min-width并显示：inline-block，但它仍在调整大小。任何帮助，将不胜感激。另外，使用像素值仍然无法正常工作。

屏幕截图显示最小宽度：300％！重要；没用。

我还将代码放在JS Fiddle中：https://jsfiddle.net/wvhgsek9/

HTML：

  <form class="reg_log_box login_box form-group">
        <br>
        <div class="row">
          <div class="col-md-12">
            <p>EMAIL</p>
            <input type="text" placeholder="EMAIL" autocomplete="off" name="email"
            value="<?php
              if(isset($_POST["email"])) {
                echo($_POST["email"]);
              } ?>">
          </div>
          <div class="col-md-12">
            <p>PASSWORD</p>
            <input type="text" placeholder="PASSWORD" autocomplete="off" name="password">
          </div>
        </div>
          <input type="submit" id="login" name="login" value="LOGIN" class="reg_signup">
          <p class="center_font">NO ACCOUNT YET? <a href="register.php">REGISTER HERE</a></p>
        <br>
    </form>

CSS：

.login_box {
      min-width: 30% !important;
      display: inline-block
    }

    .reg_log_box {
      width: 50%;
      padding: 10px 70px 10px;
      background: #fff;
      opacity: 0.9;
      border-radius: 30px;
      margin: 0 auto;
    }

Answer 1

使用

.login_box {
  min-width: 30% !important;
  display: inline-block
}

不起作用，因为这将意味着始终将框的大小调整为浏览器窗口宽度的30％。

相反，请提供基于像素的值，例如

.login_box {
  min-width: 300px;
}

编辑：

要完全停止完全调整大小，然后将宽度更改为基于像素的值。

.reg_log_box {
  width: 500px;
  padding: 10px 70px 10px;
  background: #fff;
  opacity: 0.9;
  border-radius: 30px;
  margin: 0 auto;
}

然后您可以一起删除.login_box css ...

Answer 2

尝试resize: block;

块该元素显示一种机制，允许用户在块方向（水平或垂直，取决于写入模式和方向值）上调整其大小。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize

Div类最小宽度仍在调整大小

2 个答案: