0

嗨，使用以下编码我遇到了一个小问题。如果您访问我的页面http://freebetoffersonline.com/bet-calc.php并单击任何投注类型，然后单击任意数量的获胜者，您会看到出现的计算器未正确对齐并与我的滑块重叠

我已经确定它（我认为）是以下编码的这一部分

.calculator {
position:relative;
background-color:#fff;
width: 880px;
text-align:center;
float:left;
margin-top: 180px;
padding: 10px;
}

但是当我减小宽度时，这一切都进入了我想要的对齐方式，但是底部的 2 个框（总回报和总利润）不再并排，一个下降了一个完整的水平。

RR

所以与其看起来像上面的 2 R

R
 R

看起来像上面的这2个R

/* BET CALCLATOR */

.bidlist {
position:absolute;
background-color:#fff;
width: 560px;
text-align:center;
float:left;
}

.bidlist div.row {
float: left;
text-align:center;
width: 25%;
}


.calculator {
position:relative;
background-color:#fff;
width: 880px;
text-align:center;
float:left;
margin-top: 180px;
padding: 10px;
}


.betbutton{
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-style:solid;
border-color:#FDF382 #FFEE30 #ffea00 #FDEE42;
border-width:3px 4px 4px 3px;
width:9em;
height:2em;
background:#128F01;
line-height:2;
text-align:center;
font-weight:900;
padding: 5px;
width: 93%;
cursor: pointer;
font-family: Aller, Arial;
font-size: 14px;
}

.betbutton:hover{
border-color: #FDF382 #FFEE30 #ffea00 #FDEE42;
border-width:4px 3px 3px 4px;
text-shadow: 0 1px 1px #ffea00;
color:#FFFFFF;
padding: 5px;
}

.unitstake {
    border:2px solid #bbbbbb;
text-align: center;
 height:80px;
 z-index:15;
 margin: 0 40% 0 40%;
}

.unitstake div.head{
border-bottom: 1px solid #cccccc;
}

.oddselection{
    /*border:2px solid #bbbbbb;*/
text-align: center;
 z-index:15;
 margin: 0 30% 0 30%;

}

.oddselection div.head{
float: left;
width: 100%;
}


.oddselection div.left{
border:2px solid #bbbbbb;
float: left;
width: 33%;
}

.oddselection div.left div.head{
border-bottom: 1px solid #cccccc;
}

.oddselection div.left div.row{
height: 30px;
}
.oddselection div.left div.row1{
height: 60px;
}

.oddselection div.right{
border:2px solid #bbbbbb;
float:right;
width: 63%;
}

.oddselection div.right div.head{
border-bottom: 1px solid #cccccc;
}


.oddselection div.right div.row{
height: 30px;
}

.oddselection div.right div.row1{
height: 60px;
}



.betamountinput{
border:1px solid #456879;
border-radius:3px;
height: 22px;
width: 100px;
padding: 0 0 0 10px;
}



.betoddinput{
border:1px solid #456879;
border-radius:3px;
height: 20px;
width: 50px;
padding: 0 0 0 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 1px;
margin-bottom: 1px;
}


.calculate{
text-align: center;
 z-index:15;
 margin: 0 30% 0 30%;

}

.btnCalculate {
height: 35px;
width: 100%;
display: block;
text-align: center;
font-family: Aller, Arial;
font-size: 14px;
color: #fff;
text-decoration: none;
background-color: #0C5A01;
cursor: pointer;
float: left;
}

.btnCalculate:hover {
border-color: #FDF382 #FFEE30 #ffea00 #FDEE42;
border-width:4px 3px 3px 4px;
}


.result1{
    /*border:2px solid #bbbbbb;*/
text-align: center;
 height:80px;
 z-index:15;
 margin: 0 30% 0 30%;

}

.result1 div.head{
float: left;
width: 100%;
}


.result1 div.left{
border:2px solid #bbbbbb;
float: left;
width: 48%;
}


.result1 div.left div.head{
border-bottom: 1px solid #cccccc;
}

.result1 div.right{
border:2px solid #bbbbbb;
float:right;
width: 48%;
}

.result1 div.right div.head{
border-bottom: 1px solid #cccccc;
}

.result2{
    /*border:2px solid #bbbbbb;*/
text-align: center;
 z-index:15;
  height:80px;
 margin: 0 20% 0 20%;

}

.result2 div.head{

float: left;
width: 100%;
}


.result2 div.left{
border:2px solid #bbbbbb;
float: left;
width: 49%;
}

.result2 div.left div.head{
border-bottom: 1px solid #cccccc;
}

.result2 div.right{
border:2px solid #bbbbbb;
float:right;
width: 49%;
}


.result2 div.right div.head{
border-bottom: 1px solid #cccccc;
}

.heading1 {
margin: 0.5em 0 0.5em 0;
color: #343434;
font-size: 20px;
line-height: 20px;
font-weight: normal;
text-transform: uppercase;
font-family: 'Orienta', sans-serif;
}


.heading2 {
margin: 0.5em 0 0.5em 0;
color: #343434;
font-weight: normal;
font-size: 16px;
line-height: 20px;
font-family: Aller, Arial;
}

.heading3 {
margin: 0.5em 0 0.5em 0;
color: #343434;
font-weight: normal;
font-size: 12px;
font-family: Aller, Arial;
}



.noofwinners {
position:relative;
background-color:#fff;
width: 560px;
text-align:center;
float:left;
margin-top: 180px;
padding: 10px;
}


.winnerbutton{
     margin: 0 30% 0 30%;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-style:solid;
border-color:#FDF382 #FFEE30 #ffea00 #FDEE42;
border-width:3px 4px 4px 3px;
height:2em;
background:#0C5A01;
line-height:2;
text-align:center;
font-weight:900;
padding: 5px;
cursor: pointer;
font-family: Aller, Arial;
font-size: 14px;
}

.winnerbutton:hover{
border-color: #FDF382 #FFEE30 #ffea00 #FDEE42;
border-width:4px 3px 3px 4px;
text-shadow: 0 1px 1px #ffea00;
color:#FFFFFF;
padding: 5px;
}
4

1 回答 1

0

我在玩代码。这是我的最后一个屏幕截图

投注计算器新

显然，如果您想要右侧滑块，那么您需要妥协计算器的一些宽度和高度。

.calculator {
position: relative;
background-color: #fff;
width: 100%;
text-align: center;
float: left;
margin-top: 180px;
padding: 10px;}

这是 CSS 将宽度更改为 100%。

然后减小其他 div 的宽度，即总赌注和其他。由于有很多硬编码，现在应用百分比并不那么容易。尝试你会得到一个输出，但你可能会影响计算器部分的宽度及其内容。

这些是其他编辑

.result2 div.right {
border: 2px solid #bbbbbb;
float: right;
width: 48%;
}



.result1 div.left {
border: 2px solid #bbbbbb;
float: left;
width: 48%;
height: 100%;
}


.result1 div.right {
border: 2px solid #bbbbbb;
float: right;
height: 100%;
width: 48%;
}

看看这张照片。您正在寻找这样的东西吗？

新赌注

于 2013-09-15T04:45:45.720 回答