gpt4 book ai didi

html - 使用 html 或/和 css 将按钮直接放置在彼此下方

转载 作者:太空宇宙 更新时间:2023-11-04 14:17:03 25 4
gpt4 key购买 nike

我有以下 html 脚本。

<!DOCTYPE html>

<head>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'sslcert/style.css' %}" />
<script type="text/javascript">
function oeffnefenster(url){infopopup = window.open(url, "fenster1", "width = 700, height = 600, status=yes, scrollbars=yes, resizable=yes")}
infopopup.focus()
</script>
<script type="text/javascript">
function erfolgreich(url){infopopup = window.open(url, "fenster1", "width = 700, height = 600, status=yes, scrollbars=yes, resizable=yes")}
infopopup.focus()
</script>
</head>


<body>
<div class = "compprologo">
<a href = "http://www.comp-pro.de"/>
<img src = "{% static 'sslcert/logo_comppro.png' %}"/>
</a>
</div>
<div class = "table">
<table border = "0">
{% for file in files %}
<tr>
<td> {{ file }}</td>
<td width="25%" align = "right">
<a href="http://10.0.3.186:8000/sslcert/{{ file }}" onclick="oeffnefenster(this.href);return false">
<font color = "white">Info</font>
</a>
</td>
<td width="25%" align = "right">
<a href="http//10.0.3.186:8000/sslcert/{{ file }}/keyCrt">
<font color = "white">Certificate</font>
</a>
</td>
<td width="25%" align = "right">
<a href="http://10.0.3.186:8000/sslcert/{{ file }}/keyDownload">
<font color = "white">SSL-Key</font>
</a>
</td>
<td width="25%" align = "right">
<a href="http://10.0.3.186:8000/sslcert/{{ file }}/revoke" onclick="erfolgreich(this.href);return false">
<font color = "white">Revoke</font>
</a>
</td>
</tr>
{% endfor %}
</table>
</div>
<div class="AddSSL">
<form action = "adduser.html" method = "post">{% csrf_token %}
<input type = "submit" name = "form" style = "width:8%" value = "Add SSL-Key" class = "AddSSL">
</form>
</div>
<div class="Downloadcrl>
<form action = "Download crl.pem" method = "post">{% csrf_token %}
<input type = "submit" name = "form" style = "width:8%" value = "Download crl.pem" class = "Downloadcrl">
</form>
</div>
</body>

这是我的 CSS 的样子:

body {
background: url("body_bg_noise.png") repeat;
overflow-y:scroll;
}
.AddSSL {
position: fixed;
top: 0.8%;
}

.Downloadcrl {
position:fixed;
top:4%;
}

.info {
position:fixed;
top:5%
width: 30%;
}



.table {

color: white;
margin-left: auto;
margin-right: auto;
width: 80%;
background: black;
border: 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-border-radius: 10px;
border-radius: 10px;
top:50%;
}

.idundpw {
margin-left: auto;
margin-right:auto;
width: 80%;
}

ul {
list-style-type: circle;
}

.compprologo {
margin-left: auto;
margin-right:auto;
text-align:center;
width:80%;
background:white;
border: 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-border-radius: 10px;
border-radius: 10px;
}
a:link {text-decoration:none;}

如果您使用我的监视器 (1280x800),那看起来会很好吃 :P 但是当您使用稍微小一点的监视器时,有两个按钮:添加 SSL key 下载crl.pem 会混合在一起,因为我使用了一些非常随机的百分比,这些百分比与我的显示器尺寸具有协同作用。我的计划是更改 html 或 css,所以我将这两个按钮放在一起。这是目前的样子:enter image description here

最佳答案

像这样将按钮放入容器中:

<div class="Buttons">
<div class="AddSSL">
<form action = "adduser.html" method = "post">{% csrf_token %}
<input type = "submit" name = "form" value = "Add SSL-Key" class = "AddSSL">
</form>
</div>
<div class="Downloadcrl">
<form action = "Download crl.pem" method = "post">{% csrf_token %}
<input type = "submit" name = "form" value = "Download crl.pem" class = "Downloadcrl">
</form>
</div>
</div>

然后你可以用 .buttons 类选择器将两个按钮的位置设置为固定的,同样应该对 top 值做同样的事情。

.buttons {
position: fixed;
top: 0.8%;
width: 8%;
}

.AddSSL {
margin-bottom: 2px; /* or something like this for the gap */
width: 100%;
}

.Downloadcrl {
width: 100%;
}

http://jsfiddle.net/hBHzC/

关于html - 使用 html 或/和 css 将按钮直接放置在彼此下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20269119/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com