Question

我知道已经有一些问题，但是没有一个问题可以帮助我解决问题。（也可能不是一个困难的解决方案，但我是html和css的初学者。）

因此，我正在尝试设计一个小型网站并解决问题，无论我做什么，似乎都无法找到一种方法来使我的浏览器窗口变小以阻止网站上的元素重叠。这是该问题的两个屏幕截图：

这是我的代码，首先是CSS：

#Button1 {
        z-index: 1;
        left: 145px;
        top: 124px;
        height: 110px;
        width: 239px;
        left: 20%;
        top:20%;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        text-align: center;
        transition: all .2s ease;
        margin: 0 auto;
        padding: 8px 5px;
        color: #000000; background-color: #F5F5F5; border: 2px solid #CCCCCC;
        cursor: pointer;
        display: inline-block;
        margin: 10px;
    }
    #Button1:Hover, #Button1:focus, #Button1:active { 
color: #fff;
background-color: #FFDB26;
border: 2px solid #BEC1CD;
}

 #Button2 {
        z-index: 1;
        left: 30px;
        top: 169px;
        margin-top: 0px;
        height: 130px;
        width: 260px;
        display: inline-block;
        margin: 10px;
    }

这是我使用的HTML：

<body>
<div style="z-index: 1; margin:20px; padding:30px; left: 0px; position: fixed; height: 100%; width: 44%; top: 15px;">
    <input id="Button1" type="button" value="button" /></div>
<div style="z-index: 1; padding: 30px; margin: 20px; left: 50%; position: fixed; height: 100%; width: 50%">
    <input id="Button2" type="button" value="button" /></div>

如果有人可以告诉我要进行哪些更改才能使其正常工作，那就太好了。

Answer 1

您可以尝试执行以下操作：https://jsfiddle.net/xe42tzL9/

  <div class="but">
    <input id="Button1" type="button" value="button" />
    <input id="Button2" type="button" value="button" />
  </div>



.but {
  text-align: center;
  display: inline-block;
  position: absolute;
  width:  100%;
}

#Button1 {

        left: 145px;
        top: 124px;
        height: 110px;
        width: 239px;
        left: 20%;
        top:20%;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        text-align: center;
        transition: all .2s ease;
        margin: 0 auto;
        padding: 8px 5px;
        color: #000000; background-color: #F5F5F5; border: 2px solid #CCCCCC;
        cursor: pointer;
        margin: 10px;
    }
#Button1:Hover, #Button1:focus, #Button1:active { 
        color: #fff;
        background-color: #FFDB26;
        border: 2px solid #BEC1CD;
}

 #Button2 {

        left: 30px;
        top: 169px;
        margin-top: 0px;
        height: 130px;
        width: 260px;
        margin: 10px;
 }

调整窗口大小时如何停止按钮重叠

1 个答案: