CSS / HTML5的尺寸调整问题

Question

I am currently working on a small website. 我目前正在一个小型网站上工作。 I have a few questions in regards to the positioning, sizing, alignment of some of my buttons... 关于一些按钮的位置，大小，对齐方式，我有几个问题。

I would like my boxes to always stay in the centre of the screen(✔). 我希望我的盒子始终位于屏幕中央（✔）。
I would like to have a adaptive button scheme so that they stack onto one another when the window become small enough. 我希望有一种自适应按钮方案，以便当窗口变得足够小时，它们可以彼此堆叠。 Currently, they get all bundled together and are unreadable once the page reaches a certain size (picture shown below). 当前，它们都捆绑在一起，一旦页面达到一定大小就无法读取（如下图所示）。
I would like my sign up text to be at the bottom of my two buttons. 我希望我的注册文本位于两个按钮的底部。 It is currently on the right side of them. 当前位于它们的右侧。 Also, when the window is at a certain size where the boxes need to be on top of eachother instead of beside, I would like my sign up text to follow along and go under the second box. 另外，当窗口的大小一定时，框需要在彼此的顶部而不是旁边，我希望我的注册文本跟随并进入第二个框。 Below I will share my code ( both html & CSS ) and I will send pictures of the current state of the website. 下面，我将分享我的代码（ html和CSS ），并发送网站当前状态的图片。

Thanks in advance. 提前致谢。

CSS CODE CSS代码

body{
    margin-top: 300px;
    text-align: center;
}


.ownerButton, .employeeButton {
    background-color: #333;
    text-align: center;
    text-decoration: none;
}



.ownerButton, .employeeButton {
    font-family: "georgia", sans-serif;
    font-size: 24px;
    padding: 1em 2em;
    margin: 3px;
    border: 0;
    outline: 0;
    color: #000000;
    background-color: #2196F3;
    text-transform: uppercase;
    border-radius: 0.15em;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);

    font-weight: bold;

    overflow: hidden;
    position: relative;
}

.footer{
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;

    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;

    background-color: #2196F3;
    text-align: center;
}

HTML CODE HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
      <title>Belper</title>
  <link rel="stylesheet" href="style.css">
    </head>
    <body bgcolor=#4286f4>

        <a href="http://www.google.com" class="ownerButton">Sign in as OWNER</a>
        <a href="http://www.google.com" class="employeeButton">Sign in as EMPLOYEE</a>

        <a href="http://google.com" class="signUp">Dont have an account? Sign up here!</a>

        <div class="footer">
        <p>Copyright © 2000-2017 - Mathieu Larocque - All Rights Reserved.</p>
        </div>

    </body>
</html>

Image while window is large 窗口大时的图像

Image while window is small 窗小时的影像

Answer 1

You can add display:block to a .signUp rule in your style sheet to get that on a new line. 您可以在样式表中将display:block添加到.signUp规则，以将其换行。

You can also add display: inline-block to the .ownerButton, .employeeButton rule 您还可以将display: inline-block添加到.ownerButton, .employeeButton规则

https://codepen.io/jbanegas/pen/xXpMKM?editors=1100 https://codepen.io/jbanegas/pen/xXpMKM?editors=1100

CSS / HTML5的尺寸调整问题

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-10-05 23:57:33

CSS / HTML5的尺寸调整问题

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-10-05 23:57:33

解决方案1
0 已采纳 2017-10-05 23:57:33