我有以下 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，所以我将这两个按钮放在一起。这是目前的样子:
最佳答案
像这样将按钮放入容器中:
<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%;
}
关于html - 使用 html 或/和 css 将按钮直接放置在彼此下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20269119/