- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在开发一个 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 之类的东西不起作用,我不知道为什么。
最佳答案
您可以简单地添加:
display: flex;
flex-direction: column;
到您的容器类。
我个人对我的大部分 CSS 使用 display:flex
因为它更容易操作。如果您想了解更多信息,可以阅读更多 here
关于html - CSS 网格中的最后一行不适合我的 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57200275/
这个问题在这里已经有了答案: “return” and “try-catch-finally” block evaluation in scala (2 个回答) 7年前关闭。 为什么method1返
我有一个动态列表,需要选择最后一项之前的项目。 drag your favorites here var lastLiId = $(".album
我想为每个线程执行特定操作,因此,我认为tearDown Thread Group 不起作用。 是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”? 谢谢。 最佳答案
在我的书中它使用了这样的东西: for($ARGV[0]) { Expression && do { print "..."; last; }; ... } for 循环不完整吗?另外,do 的意义何
我想为每个线程执行特定操作,因此,我认为tearDown Thread Group 不起作用。 是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”? 谢谢。 最佳答案
有没有可能 finally 不会被调用但应用程序仍在运行? 我在那里释放信号量 finally { _semParallelUpdates.Re
我收藏了 对齐的元素,以便它们形成两列。使用 nth-last-child 的组合和 nth-child(even) - 或任何其他选择器 - 是否可以将样式应用于以下两者之一:a)最后两个(假设
我正在阅读 Jon Skeet 的 C# in Depth . 在第 156 页,他有一个示例, list 5.13“使用多个委托(delegate)捕获多个变量实例化”。 List list = n
我在 AM4:AM1000 范围内有一个数据列表(从上到下有间隙),它总是被添加到其中,我想在其中查找和总结最后 4 个结果。但我只想找到与单独列相对应的结果,范围 AL4:AL1000 等于单元格
我最近编写了一个运行良好的 PowerShell 脚本 - 然而,我现在想升级该脚本并添加一些错误检查/处理 - 但我似乎被第一个障碍难住了。为什么下面的代码不起作用? try { Remove-
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
使用 Django 中这样的模型,如何检索 30 天的条目并计算当天添加的条目数。 class Entry(models.Model): ... entered = models.Da
我有以下代码。 public static void main(String[] args) { // TODO Auto-generated method stub
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
这个问题已经有答案了: Multiple returns: Which one sets the final return value? (7 个回答) 已关闭 8 年前。 我正在经历几个在工作面试中
$ cat n2.txt apn,date 3704-156,11/04/2019 3704-156,11/22/2019 5515-004,10/23/2019 3732-231,10/07/201
我可以在 C/C++ 中设置/禁用普通数组最后几个元素的读(或写)访问权限吗?由于我无法使用其他进程的内存,我怀疑这是可能的,但如何实现呢?我用谷歌搜索但找不到。 如果可以,怎样做? 因为我想尝试这样
我想使用在这里找到的虚拟键盘组件 http://www.codeproject.com/KB/miscctrl/touchscreenkeyboard.aspx就像 Windows 中的屏幕键盘 (O
我正在运行一个 while 循环来获取每个对话的最新消息,但是我收到了错误 [18-Feb-2012 21:14:59] PHP Warning: mysql_fetch_array(): supp
这个问题在这里已经有了答案: How to get the last day of the month? (44 个答案) 关闭 8 年前。 这是我在这里的第一篇文章,所以如果我做错了请告诉我...
我是一名优秀的程序员,十分优秀!