Question

我希望我的HTML / CSS与下图中的内容相匹配：

目前这是我的HTML / CSS的样子：

我在HTML / CSS中遇到的问题有四件事：图片目前在做什么：

将文本对齐复选框右侧，使复选框
使图片中的两个按钮大小相同
根据上面的白色段落使两个按钮居中
我似乎无法同时做＃2和＃3。

两张图片之间的任何其他差异都可以忽略。

如何完成上述第1-4项？

这是plunker链接：http://plnkr.co/edit/dfZg2C1ZrqdeSdoBa21t?p=preview

这是HTML代码：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="LoadingDiv">
    <div class="LoadingText">
      <p style="color:red"><strong>Attention! You must agree to continue with Online Forms</strong></p>
      <p><input type="checkbox"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <div class="btn-group">
      <button class="btn btn-dont-allow">DON'T ALLOW</button>
      <button class="btn btn-consent-ok">OK</button>
      </div>
    </div>
  </div>
  </body>

</html>

这是CSS：

#LoadingDiv .btn {
  min-width: 30%;
}


#LoadingDiv .btn-group {
  margin-left:35%;
  position: relative;
}


#LoadingDiv .LoadingText {
  position: relative;
  left: 25%;
  top: 25%;
  width: 50%;
  color: white;
}

#LoadingDiv .btn-dont-allow {
    background-color: #808083;
    color: #ffffff;
    padding: 3px 50px;
    font-size: 16px;
    margin-left: 3px;
    margin-right: 3px;
}

#LoadingDiv .btn-consent-ok {
    background-color: #1aa8de;
    color: #ffffff;
    padding: 3px 50px;
    font-size: 16px;
    margin-left: 3px;
    margin-right: 3px;
}

#LoadingDiv {
  margin: 0px 0px 0px 0px;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 9999;
  width: 100%;
  clear: none;
  background-color: rgba(68, 176, 129, 0.9);
}

P.S：这张图片中的标记不是使用HTML / CSS创建的，而是使用原型应用程序创建的，因此我无法从源代码中提取它。

Answer 1

请参阅此小提琴https://jsfiddle.net/DIRTY_SMITH/avocyf33/7/

添加了

p {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
}

并将min-width: 400px;添加到btn-group以防止按钮被包装。

Answer 2

Jsfiddle

＆＃13;

#LoadingDiv .btn {
  min-width: 30%;
}
#LoadingDiv .btn-group {
  display: inline-block;
}
#LoadingDiv .LoadingText {
  position: relative;
  left: 25%;
  top: 25%;
  width: 50%;
  color: white;
}
#LoadingDiv .btn-dont-allow {
  background-color: #808083;
  color: #ffffff;
  padding: 3px 50px;
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}
#LoadingDiv .btn-consent-ok {
  background-color: #1aa8de;
  color: #ffffff;
  padding: 3px 50px;
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}
#LoadingDiv {
  margin: 0px 0px 0px 0px;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 9999;
  width: 100%;
  clear: none;
  background-color: rgba(68, 176, 129, 0.9);
}
.check {
  width: 15px;
  height: 15px;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  position: relative;
  top: -3px;
}
.agree {
  display: inline-block;
  margin-left: 30px;
  margin-top: -22px;
  vertical-align: top;
}

＆＃13;

<body>
  <div id="LoadingDiv">
    <div class="LoadingText">
      <p style="color:red"><strong>Attention! You must agree to continue with Online Forms</strong>
      </p>
      <input type="checkbox" class="check">
      <p class="agree">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <div class="btn-group">
        <button class="btn btn-dont-allow">DON'T ALLOW</button>
        <button class="btn btn-consent-ok">OK</button>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

将文本对齐复选框和中心按钮右侧

2 个答案: