Question

我有以下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密钥和下载crl.pem 会混合在一起，因为我使用了一些非常随机的百分比，只是与我的显示器尺寸有协同作用。我的计划是改变html或css，所以我把这两个按钮放在一起。目前的情况如下： enter image description here

Answer 1

将按钮放在如下容器中：

<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类选择器设置两个按钮的位置来固定，并且应该对顶部值进行相同的操作。

.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或/和css将按钮直接放在彼此之下

1 个答案: