Question

我正在开发一个Electron应用程序来刮擦仙人掌服务器，主要的刮擦部件工作正常，但是我对UI感到困惑。问题是在我的最后一行按钮似乎无法在html内适应（或正文，我的html很糟糕，对此感到抱歉）。我对CSS和HTML有所了解，经过大量搜索后，这里是与UI相关的代码：

html {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;
    height: 100%;
}
body {
    height: 100%;
    padding: 15px;
    margin: auto;
    font-weight: bold;
    overflow: hidden;
}


.container{
    height: 100%;
    margin-bottom: 15px;
    display: grid;
    grid-template: 250px minmax(10px, 1fr) 40px / auto;
    margin-bottom: 50px;
}
.grid-container{
    display: grid;
    grid-template-rows: repeat(auto-fill, auto);
    grid-gap: 10px;
    /* grid-template-columns: auto; */
}
.grid-container > div{
    display: grid;
    grid-template-rows: auto ;
    /* grid-template-columns: repeate(2, auto); */
    grid-template-columns: 1fr 1.6fr;
}

label{
    margin-right: 15px;
    user-select: none;
}

.btn-container {
    display: grid;
    grid-template-columns: 30% auto 30%;
    /* padding-bottom: 50px; */
    box-sizing: border-box;
    white-space: nowrap;
}

input {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;
    font-size: 1em;
    font-weight: bold;
    border: 3px solid #e78616;
    border-radius: 3px;
    text-align: center;
    outline: none;
}


button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    border-radius: 12px;
    outline: none;
}
button:hover{
    cursor: pointer;
    font-weight: bold;
    color: #fd0101;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
input:hover{
    cursor: text;
}

input.glow {
    -webkit-box-shadow: 0px 0px 31px 9px #ff4da665;
    -moz-box-shadow: 0px 0px 31px 9px #ff4da665;
    box-shadow: 0px 0px 25px 9px #ff4da665;
    border-radius: 10px;
    appearance: none;
}

label.glow {
    font-size: 16px;
    color: #000;
    text-shadow: 3px 0px 20px #ff188b;
}

<div class="container">
    <div class="grid-container">
      <div id="ip_input" class="inner-grid-container">
        <label for="ip_input_entry_point">Cacti Server IP:</label>
        <input type="text" id="ip_input_entry_point" minlength="7" maxlength="15" size="15" placeholder="xxx.xxx.xxx.xxx"
          pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
      </div>
      <div id="port_input" class="inner-grid-container">
        <label for="port_input_entry_point">Cacti Server Port:</label>
        <input type="port" id="port_input_entry_point" minlength="2" maxlength="5" size="15" placeholder="xx">
      </div>
      <div id="user_input" class="inner-grid-container">
        <label for="user_input_entry_point">Cacti Server User:</label>
        <input type="text" id="user_input_entry_point" minlength="1" maxlength="15" size="15" placeholder="username">
      </div>
      <div id="password_input" class="inner-grid-container">
        <label for="password_input_entry_point">Cacti Server Password:</label>
        <input type="password" id="password_input_entry_point" minlength="7" maxlength="15" size="15"
          placeholder="You'r login password">
      </div>
      <div id="begin_input" class="inner-grid-container">
        <label for="begin_input_entry_point">From Date:</label>
        <input type="text" id="begin_input_entry_point" class="begin_date" placeholder="YYY-MM-DD HH:MM:SS">
      </div>
      <div id="finish_input" class="inner-grid-container">
        <label for="finish_input_entry_point">To Date:</label>
        <input type="text" id="finish_input_entry_point" class="finish_date" placeholder="YYY-MM-DD HH:MM:SS">
      </div>
    </div>
    <div style="visibility: hidden">Junky TEXT</div>
    <div class="btn-container">
      <button class="button" id="run-btn">Run</button>
      <div></div>
      <button class="button" id="reset-btn">Reset</button>
    </div>
  </div>

我需要一个响应式UI，所以我在输入和按钮之间添加了一个额外的div，并为其设置了auto，以便它可以增长和收缩，但是真正令我困扰的是我无法在按钮和底部之间拉开距离页面上，像padding-bottom或margin-bottom-bottom之类的东西不起作用，我也不知道为什么。

Answer 1

您只需添加：

display: flex;
flex-direction: column;

到您的容器类。

我个人将display: flex用于大多数CSS，因为它更易于操作。如果您想进一步了解它，可以阅读更多here

CSS网格中的最后一行不适合我的html

1 个答案: