需要帮助并排排列按钮

时间：2016-10-01 07:37:59

标签： html css

我正在尝试制作一个网页，其中有三个触发模式的按钮：每月订阅，每年订阅和购买附加组件。两个会员按钮都打开一个带有PayPal订阅页面的模态。现在，只要我添加PayPal代码，我就失去了将2个按钮并排放置的能力。相反，它们是堆叠的。我尝试了<Center>，Text-Align，将模态放在DIV中，但仍然没有成功。 

<!DOCTYPE html>
<html>
<head>
<style>
/* START: Modal Box */
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 5% auto;
    padding: 5px 10px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #b3b3b3);
    background: -webkit-linear-gradient(#fff, #b3b3b3);
    background: -o-linear-gradient(#fff, #b3b3b3);
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #00d9ff;
}
/* END: Modal Box */
/* Start: Button */
.button {
    background-color: #00bfff;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
/* END: Button */
/* START: Button Centre */
.buttoncentre {
    float: centre;
    text-align: center;

}
/* END: Button Centre */
/* START: Text Box */
.enjoy-css {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin: 0 10%;
  padding: 15px;
  overflow: hidden;
  border: 12px solid rgba(220,220,220,0.3);
  -webkit-border-radius: 15px;
  border-radius: 15px;
  font: normal 20px/1 Verdana, Geneva, sans-serif;
  color: rgba(0,0,0,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: rgba(220,220,220,0.41);
  -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
  box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
}
/* END: Text Box */
/* START: Logo */
.logo {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto
}
img {
    max-width: 100%;
    height: auto;
    }
h1 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
</style>
</head>
<body>
<div class="logo"><img src="#" alt="" width="600" height="140" /></div>
<br>
<h1>TEST</h1>
<div class="enjoy-css"><br>Why are the modal buttons not side by side?<br><br> I would like Monthly and Yearly beside eachother<br><br>I would like Purchase Add-Ons centred and <br><br> underneath the Monthly and Yearly buttons<br><br><br><b>EXAMPLE</b><br><br>[Monthly Subscription] [Yearly Subscription] <br><br> [Purchase Add-Ons]</i>
<br><br></div>
<br>
<div class="buttoncentre">
<a href="#openModal-1" style="text-decoration: none";>
<div>
<button class="button">Monthly Subscription</button>
</div></a>

<div id="openModal-1" class="modalDialog">
    <div> <a href="#close" title="Close" class="close">X</a>

         <h2>Monthly Subscription</h2>
  <p>
<div style="text-align:center;">

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="ZU3DGYNGJ3BL4">
<table align="center">
<tr><td><input type="hidden" name="on0" value="How Many Accounts Would You Like Us To Manage?">How Many Accounts Would You Like Us To Manage?</td></tr><tr><td><select name="os0">
 <option value="1 Account">1 Account : $40.00 USD - monthly</option>
 <option value="2 Accounts">2 Accounts : $70.00 USD - monthly</option>
 <option value="3 Accounts">3 Accounts : $100.00 USD - monthly</option>
 <option value="4 Accounts">4 Accounts : $130.00 USD - monthly</option>
 <option value="5 Accounts">5 Accounts : $160.00 USD - monthly</option>
 <option value="6 Accounts">6 Accounts : $190.00 USD - monthly</option>
 <option value="7 Accounts">7 Accounts : $220.00 USD - monthly</option>
 <option value="8 Accounts">8 Accounts : $250.00 USD - monthly</option>
 <option value="9 Accounts">9 Accounts : $280.00 USD - monthly</option>
 <option value="10 Accounts">10 Accounts : $300.00 USD - monthly</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Your Username(s)">Your Username(s)</td></tr><tr><td><input type="text" name="os1" maxlength="200"></td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<br>
</div>

 </div></div></li></li> </span>


<div class="buttoncentre">
<a href="#openModal-2" style="text-decoration: none">
<div>
<button class="button">Yearly Subscription</button>
</div></a>

<div id="openModal-2" class="modalDialog">
    <div> <a href="#close" title="Close" class="close">X</a>

         <h2>Yearly Subscription</h2>
  <p>
<div style="text-align:center;">

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XZM8BA3BLQ5V2">
<table align="center">
<tr><td><input type="hidden" name="on0" value="How Many Accounts Would You Like Us To Manage?">How Many Accounts Would You Like Us To Manage?</td></tr><tr><td><select name="os0">
 <option value="1 Account">1 Account : $365.00 USD - yearly</option>
 <option value="2 Accounts">2 Accounts : $730.00 USD - yearly</option>
 <option value="3 Accounts">3 Accounts : $1,095.00 USD - yearly</option>
 <option value="4 Accounts">4 Accounts : $1,460.00 USD - yearly</option>
 <option value="5 Accounts">5 Accounts : $1,825.00 USD - yearly</option>
 <option value="6 Accounts">6 Accounts : $2,190.00 USD - yearly</option>
 <option value="7 Accounts">7 Accounts : $2,555.00 USD - yearly</option>
 <option value="8 Accounts">8 Accounts : $2,920.00 USD - yearly</option>
 <option value="9 Accounts">9 Accounts : $3,285.00 USD - yearly</option>
 <option value="10 Accounts">10 Accounts : $3,500.00 USD - yearly</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Your Username(s)">Your Username(s)</td></tr><tr><td><input type="text" name="os1" maxlength="200"></td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<br>
</div>

 </div></div></li></li> </span>
<a href="#" class="button">Purchase Add-Ons</a>

</div>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

您的html布局在很多地方都不正确。修复那些然后添加规则：

.buttoncentre.inline a{
  display:inline-block;
}

并使你的HTML像：

<div class="buttoncentre inline">
    <a href="#openModal-1" style="text-decoration: none" ;>
        <div>
            <button class="button">Monthly Subscription</button>
        </div>
    </a>

    <a href="#openModal-2" style="text-decoration: none">
        <div>
            <button class="button">Yearly Subscription</button>
        </div>
    </a>
</div>
<div class="buttoncentre">
    <a href="#" class="button">Purchase Add-Ons</a>
</div>

请注意，将所有模态保留在页面底部，恰好在结束body标记之前，绝对不要将它们与您的UI（打开它们的按钮旁边）混合在一起他们。这太乱了;）

参见此示例：

/* START: Modal Box */

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 5% auto;
  padding: 5px 10px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #b3b3b3);
  background: -webkit-linear-gradient(#fff, #b3b3b3);
  background: -o-linear-gradient(#fff, #b3b3b3);
}

.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover {
  background: #00d9ff;
}


/* END: Modal Box */


/* Start: Button */

.button {
  background-color: #00bfff;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}


/* END: Button */


/* START: Button Centre */

.buttoncentre {
  float: centre;
  text-align: center;
}

.buttoncentre.inline a{
  display:inline-block;
}



/* END: Button Centre */


/* START: Text Box */

.enjoy-css {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin: 0 10%;
  padding: 15px;
  overflow: hidden;
  border: 12px solid rgba(220, 220, 220, 0.3);
  -webkit-border-radius: 15px;
  border-radius: 15px;
  font: normal 20px/1 Verdana, Geneva, sans-serif;
  color: rgba(0, 0, 0, 1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: rgba(220, 220, 220, 0.41);
  -webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}


/* END: Text Box */


/* START: Logo */

.logo {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto
}

img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="logo">
    <img src="#" alt="" width="600" height="140" /></div>
<br>
<h1>TEST</h1>
<div class="enjoy-css">
    <br>Why are the modal buttons not side by side?
    <br>
    <br> I would like Monthly and Yearly beside eachother
    <br>
    <br>I would like Purchase Add-Ons centred and
    <br>
    <br> underneath the Monthly and Yearly buttons
    <br>
    <br>
    <br><b>EXAMPLE</b>
    <br>
    <br>[Monthly Subscription] [Yearly Subscription]
    <br>
    <br> [Purchase Add-Ons]
    <br>
    <br>
</div>
<br>
<div class="buttoncentre inline">
    <a href="#openModal-1" style="text-decoration: none" ;>
        <div>
            <button class="button">Monthly Subscription</button>
        </div>
    </a>

    <a href="#openModal-2" style="text-decoration: none">
        <div>
            <button class="button">Yearly Subscription</button>
        </div>
    </a>
</div>
<br>
<div class="buttoncentre">
    <a href="#" class="button">Purchase Add-Ons</a>
</div>


<div id="openModal-1" class="modalDialog">
    <div> <a href="#close" title="Close" class="close">X</a>

        <h2>Monthly Subscription</h2>
        <p>
        <div style="text-align:center;">

            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                <input type="hidden" name="cmd" value="_s-xclick">
                <input type="hidden" name="hosted_button_id" value="ZU3DGYNGJ3BL4">
                <table align="center">
                    <tr>
                        <td>
                            <input type="hidden" name="on0" value="How Many Accounts Would You Like Us To Manage?">How Many Accounts Would You Like Us To Manage?</td>
                    </tr>
                    <tr>
                        <td>
                            <select name="os0">
                                <option value="1 Account">1 Account : $40.00 USD - monthly</option>
                                <option value="2 Accounts">2 Accounts : $70.00 USD - monthly</option>
                                <option value="3 Accounts">3 Accounts : $100.00 USD - monthly</option>
                                <option value="4 Accounts">4 Accounts : $130.00 USD - monthly</option>
                                <option value="5 Accounts">5 Accounts : $160.00 USD - monthly</option>
                                <option value="6 Accounts">6 Accounts : $190.00 USD - monthly</option>
                                <option value="7 Accounts">7 Accounts : $220.00 USD - monthly</option>
                                <option value="8 Accounts">8 Accounts : $250.00 USD - monthly</option>
                                <option value="9 Accounts">9 Accounts : $280.00 USD - monthly</option>
                                <option value="10 Accounts">10 Accounts : $300.00 USD - monthly</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="hidden" name="on1" value="Your Username(s)">Your Username(s)</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" name="os1" maxlength="200">
                        </td>
                    </tr>
                </table>
                <input type="hidden" name="currency_code" value="USD">
                <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>
            <br>
        </div>

    </div>
</div>
<div id="openModal-2" class="modalDialog">
    <div> <a href="#close" title="Close" class="close">X</a>

        <h2>Yearly Subscription</h2>
        <p>
        <div style="text-align:center;">

            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                <input type="hidden" name="cmd" value="_s-xclick">
                <input type="hidden" name="hosted_button_id" value="XZM8BA3BLQ5V2">
                <table align="center">
                    <tr>
                        <td>
                            <input type="hidden" name="on0" value="How Many Accounts Would You Like Us To Manage?">How Many Accounts Would You Like Us To Manage?</td>
                    </tr>
                    <tr>
                        <td>
                            <select name="os0">
                                <option value="1 Account">1 Account : $365.00 USD - yearly</option>
                                <option value="2 Accounts">2 Accounts : $730.00 USD - yearly</option>
                                <option value="3 Accounts">3 Accounts : $1,095.00 USD - yearly</option>
                                <option value="4 Accounts">4 Accounts : $1,460.00 USD - yearly</option>
                                <option value="5 Accounts">5 Accounts : $1,825.00 USD - yearly</option>
                                <option value="6 Accounts">6 Accounts : $2,190.00 USD - yearly</option>
                                <option value="7 Accounts">7 Accounts : $2,555.00 USD - yearly</option>
                                <option value="8 Accounts">8 Accounts : $2,920.00 USD - yearly</option>
                                <option value="9 Accounts">9 Accounts : $3,285.00 USD - yearly</option>
                                <option value="10 Accounts">10 Accounts : $3,500.00 USD - yearly</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="hidden" name="on1" value="Your Username(s)">Your Username(s)</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" name="os1" maxlength="200">
                        </td>
                    </tr>
                </table>
                <input type="hidden" name="currency_code" value="USD">
                <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>
            <br>
        </div>

    </div>
</div>

相关问题
最新问题