html - 我并排对齐了 2 个按钮，但现在我的背景不见了

标签 html css button alignment

<分区>

我知道这可能是一个简单的问题，但我很难弄明白

我尝试并排对齐 2 个按钮，我尝试添加 float :向左，它可以工作，但背景会像这样移动到按钮上

http://jsfiddle.net/nc00a48y/5/

HTML

<body>
<div class="container">
    <div class="message">
        <a id="button" href="#">Yes, Right now</a>
        <a id="button2" href="#">No, Not now</a>

    </div>
</div>
</body>

CSS

html {height:100%; font-size:62.5%; font-family:  'Roboto', sans-serif, Arial;}
body {background: #222; font-size:1.6rem;}
.container {
    background-color: #fff;
    border-radius: 0.3rem;
    width: 94%;
    margin: auto;
    -webkit-box-shadow: 2px 2px 7px #000;
    -moz-box-shadow: 2px 2px 7px #000;
}

body {
    font-family: Arial;
}

#button {
    -moz-box-shadow:inset 0 1px 0 0 #caefab;
    -webkit-box-shadow:inset 0 1px 0 0 #caefab;
    box-shadow:inset 0 1px 0 0 #caefab;
    background:0;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a',endColorstr='#5cb811');
    background-color:#77d42a;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #268a16;
    display:block;
    color:#fff;
    font-size:2.5rem;
    font-weight:700;
    font-style:normal;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0 #666;
    margin:1.5rem 0;
    padding:6%;
    float: left;
}

#button2 {
    -moz-box-shadow:inset 0 1px 0 0 #EBEBEB;
    -webkit-box-shadow:inset 0 1px 0 0 #EBEBEB;
    box-shadow:inset 0 1px 0 0 #EBEBEB;
    background:0;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#C7C7C7',endColorstr='#C7C7C7');
    background-color:#C7C7C7;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #969696;
    display:block;
    color:#fff;
    font-size:2.5rem;
    font-weight:700;
    font-style:normal;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0 #666;
    margin:1.5rem 0;
    padding:6%;
    float: right;
}


h1 {text-align: center;font-size: 1.8rem; margin-bottom: 0.3rem; font-weight: bold;}
span { color: orange;}



@-webkit-keyframes deplete {
    0%  { 
        width: 75%;
        background: -moz-linear-gradient(top,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a));
        background: -webkit-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
        background: -o-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
        background: -ms-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
        background: linear-gradient(to bottom,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 );
    }
    50% {
        background: #fceabb;
        background: -moz-linear-gradient(top,  #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
        background: -webkit-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
        background: -o-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
        background: -ms-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
        background: linear-gradient(to bottom,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 );
    }
    70% {
        background: #f85032;
        background: -moz-linear-gradient(top,  #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827));
        background: -webkit-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: -o-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: -ms-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: linear-gradient(to bottom,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 );
    }
    100% {width: 3%;
        background: #f85032;
        background: -moz-linear-gradient(top,  #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827));
        background: -webkit-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: -o-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: -ms-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        background: linear-gradient(to bottom,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 );
    }
}


@-webkit-keyframes batt-text {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}

@media only screen and (-webkit-device-pixel-ratio: .75) {
  /* CSS for Low-density Android screens goes here *
   * Ex: HTC Evo, HTC Incredible, Nexus One */
}
@media only screen and (-webkit-device-pixel-ratio: 1) and (max-device-width: 768px) {

}

@media only screen and (-webkit-device-pixel-ratio: 1.5) {
  /* CSS for High-density Android screens goes here *
   * Ex: Samsung Galaxy SII, HTC Nexus One, HTC Evo 3D */
}

@media only screen and (-webkit-device-pixel-ratio: 2) {
  /* CSS for Ultra-high-density (Retina) Android screens goes here *
   * Ex: Samsung Galaxy SIII, HTC Evo LTE, Samsung Galaxy Nexus */
}
@media only screen and (orientation:landscape) {
    .container {max-width: 60rem;}
    #button {font-size: 3rem;}
    #button2 {font-size: 3rem;}
}

最佳答案

您必须清除最后一个按钮后的 float :

div.message:after {
    content: '';
    display: block;
    clear: both;
}

demo

关于html - 我并排对齐了 2 个按钮，但现在我的背景不见了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25508998/

上一篇：javascript - 将图像另存为 jpg 扩展名

下一篇：javascript - 单击链接和按钮显示焦点轮廓

相关文章：

php - Bootstrap 足球队动态布局

css - Joomla css 文件自行重写

html - 什么相当于 moz-box-orient？

android - 从自定义按钮类中更改按钮字体，android

html - 使 twitter Bootstrap 弹出模式滑动并固定在页面底部

javascript - 仅针对 iPad 开发网站 - 强制所有链接在应用程序模式下打开

javascript - Uncaught ReferenceError : Class is not defined

javascript - 在浏览器中打开时如何将内容放在固定标题或导航下？

javascript - 使用数组切换不同的图像

javascript - jQuery:为什么不在生成的按钮上调用点击功能

©2024 IT工具网  联系我们