Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/90.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 将文本对齐到复选框右侧并居中按钮_Html_Css - Fatal编程技术网

Html 将文本对齐到复选框右侧并居中按钮

Html 将文本对齐到复选框右侧并居中按钮,html,css,Html,Css,我希望我的HTML/CSS与下图中的内容相匹配: 这就是我的HTML/CSS当前的样子: 图片当前正在执行的HTML/CSS中有四个方面我有问题: 将文本与复选框右侧对齐,使复选框正下方不显示任何文本 使图片中的两个按钮大小相同 根据上面的白色文本段落,使两个按钮居中 我似乎不能同时做第二和第三题 这两张图片之间的任何其他差异都可以忽略 我如何完成上述第1-4项 这是plunker链接: 这是HTML代码: <!DOCTYPE html> <html> <

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

这就是我的HTML/CSS当前的样子:

图片当前正在执行的HTML/CSS中有四个方面我有问题:

  • 将文本与复选框右侧对齐,使复选框正下方不显示任何文本
  • 使图片中的两个按钮大小相同
  • 根据上面的白色文本段落,使两个按钮居中
  • 我似乎不能同时做第二和第三题
  • 这两张图片之间的任何其他差异都可以忽略

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

    这是plunker链接:

    这是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>
    
    注:这张图片中的标记不是用HTML/CSS创建的,而是一个原型应用程序,所以我不能仅仅从它的源代码中提取出来。

    看到这把小提琴了吗

    添加了这个

    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;
    }
    
    并增加了
    最小宽度:400px
    btn组
    ,以防止按钮缠绕

    看到这把小提琴了吗

    添加了这个

    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;
    }
    
    并增加了
    最小宽度:400px
    btn组
    ,以防止按钮缠绕

    看到这把小提琴了吗

    添加了这个

    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;
    }
    
    并增加了
    最小宽度:400px
    btn组
    ,以防止按钮缠绕

    看到这把小提琴了吗

    添加了这个

    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;
    }
    
    并增加了
    最小宽度:400px
    btn组
    ,以防止按钮缠绕

    #加载div.btn{
    最小宽度:30%;
    }
    #加载分区btn组{
    显示:内联块;
    }
    #LoadingDiv.LoadingText{
    位置:相对位置;
    左:25%;
    最高:25%;
    宽度:50%;
    颜色:白色;
    }
    #加载div.btn不允许{
    背景色:#808083;
    颜色:#ffffff;
    填充:3px50px;
    字体大小:16px;
    左边距:3倍;
    右边距:3倍;
    }
    #加载div.btn同意ok{
    背景色:#1aa8de;
    颜色:#ffffff;
    填充:3px50px;
    字体大小:16px;
    左边距:3倍;
    右边距:3倍;
    }
    #加载div{
    保证金:0px 0px 0px 0px;
    位置:固定;
    填充:0;
    保证金:0;
    排名:0;
    左:0;
    身高:100%;
    z指数:9999;
    宽度:100%;
    明确:无;
    背景色:rgba(68176129,0.9);
    }
    .检查{
    宽度:15px;
    高度:15px;
    填充:0;
    保证金:0;
    垂直对齐:底部对齐;
    位置:相对位置;
    顶部:-3px;
    }
    .同意{
    显示:内联块;
    左边距:30px;
    利润上限:-22px;
    垂直对齐:顶部;
    }
    
    

    注意!您必须同意继续使用在线表单

    Lorem ipsum door sit amet,一位杰出的领导者,他是一位临时劳工和职业经理人。但是,在最低限度上,我们需要一个实验室来进行日常工作。酒后驾车 这是一种不受欢迎的行为,它是一种不受欢迎的行为。除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡

    不允许 好啊

    #加载div.btn{
    最小宽度:30%;
    }
    #加载分区btn组{
    显示:内联块;
    }
    #LoadingDiv.LoadingText{
    位置:相对位置;
    左:25%;
    最高:25%;
    宽度:50%;
    颜色:白色;
    }
    #加载div.btn不允许{
    背景色:#808083;
    颜色:#ffffff;
    填充:3px50px;
    字体大小:16px;
    左边距:3倍;
    右边距:3倍;
    }
    #加载div.btn同意ok{
    背景色:#1aa8de;
    颜色:#ffffff;
    填充:3px50px;
    字体大小:16px;
    左边距:3倍;
    右边距:3倍;
    }
    #加载div{
    保证金:0px 0px 0px 0px;
    位置:固定;
    填充:0;
    保证金:0;
    排名:0;
    左:0;
    身高:100%;
    z指数:9999;
    宽度:100%;
    明确:无;
    背景色:rgba(68176129,0.9);
    }
    .检查{
    宽度:15px;
    高度:15px;
    填充:0;
    保证金:0;
    垂直对齐:底部对齐;
    位置:相对位置;
    顶部:-3px;
    }
    .同意{
    显示:内联块;
    左边距:30px;
    利润上限:-22px;
    垂直对齐:顶部;
    }
    
    

    注意!您必须同意继续使用在线表单

    Lorem ipsum door sit amet,一位杰出的领导者,他是一位临时劳工和职业经理人。但是,在最低限度上,我们需要一个实验室来进行日常工作。酒后驾车 这是一种不受欢迎的行为,它是一种不受欢迎的行为。除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡

    不允许 好啊

    #加载div.btn{
    最小宽度:30%;
    }
    #加载分区btn组{
    显示:内联块;
    }
    #LoadingDiv.LoadingText{
    位置:相对位置;
    左:25%;
    最高:25%;
    宽度:50%;
    颜色:白色;
    }
    #加载div.btn不允许{
    背景色:#808083;
    颜色:#ffffff;
    填充:3px50px;
    字体大小:16px;
    左边距:3倍;
    右边距:3倍;
    }
    #加载div.btn同意ok{
    背景色:#1aa8de;
    颜色:#ffffff;
    填充:3px50px;
    字体大小:16px;
    左边距:3倍;
    右边距:3倍;
    }
    #加载div{
    保证金:0px 0px 0px 0px;
    位置:固定;
    填充:0;
    保证金:0;
    排名:0;
    左:0;
    身高:100%;
    z指数:9999;
    宽度:100%;
    明确:无;
    背景色:rgba(68176129,0.9);
    }
    .检查{
    宽度:15px;
    高度:15px;
    填充:0;
    保证金:0;
    垂直对齐:底部对齐;
    位置:相对位置;
    顶部:-3px;
    }
    .同意{
    显示:内联块;
    左边距:30px;
    利润上限:-22px;
    垂直对齐:顶部;
    }
    
    

    注意!你必须