javascript - 难点集中价格表和按钮

我发现很难在不影响页脚的情况下集中这些价格表，也很难在价格表下集中“查询”按钮。我尝试了几件事，但最终将内容覆盖在页脚上

{
    box-sizing: border-box;
}

.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

<div class="plantitle">
<h2 style="text-align:center">DOLLAR COMPENSATION PLANS</h2>
<p style="text-align:center">Choose A Plan to Sign-Up</p>
</div>
<div class="pricealign">
<div class="columns">
  <ul class="price">
    <li class="header">$10 – 85% payout</li>
    <li class="grey">Level 1 - 5 = $25</li>
    <li>Level 2 – 25 = $106.25</li>
    <li>Level 3 – 125  =  $531.25</li>
    <li>Level 4 – 625 = $2,656.25</li>
    <li>Level 5 – 3125 = $13,281.25</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header" style="background-color:#4CAF50">$20 – 85% payout</li>
    <li class="grey">Level 1 - 5 = $60</li>
    <li>Level 2 – 25 = $170</li>
    <li>Level 3 – 125 = $850</li>
    <li>Level 4 – 625 = $4,250</li>
    <li>Level 5 – 3125 = $21,250</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">$50 – 85% payout</li>
    <li class="grey">Level 1 - 5 = $100</li>
    <li>Level 2 – 25 = $637.5</li>
    <li>Level 3 – 125 = $3,187.5</li>
    <li>Level 4 – 625 = $15,937.5</li>
    <li>Level 5 – 3125 = $79,687.5</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">$50 – 85% payout</li>
    <li class="grey">Level 1 - 5 = $100</li>
    <li>Level 2 – 25 = $637.5</li>
    <li>Level 3 – 125 = $3,187.5</li>
    <li>Level 4 – 625 = $15,937.5</li>
    <li>Level 5 – 3125 = $79,687.5</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}
</script>

<div class="planenq">
<div class="container">
    <button class="button"><span><a href="#">For Enquiries</a> </span></button>

    </div>
</div>

最佳答案

您可能正在寻找这个link to code pen

或者您可以在这里进行测试。由于屏幕的大小，它在这里可能看起来并不完全集中，但是如果您在我上面提供的代码笔的链接上对其进行测试，它将完全集中。

{
box-sizing: border-box;
}

.columns {
float: left;
width: 33.3%;
padding: 8px;
margin: 0 20px 0 50px;
}

.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
background-color: #111;
color: white;
font-size: 25px;
}

.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}

.price .grey {
background-color: #eee;
font-size: 20px;
}

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}

@media only screen and (max-width: 600px) {
.columns {
    width: 100%;
}
}

.pricealign{
  margin: 10px auto;
  width: 700px;
}

.clearfix{
  content: "";
  display: table;
  clear: both;
  margin: 20px auto;
}

#main-container{
  padding: 0 0 0 20px;
  width: 200px;
}

<div class="plantitle">
<h2 style="text-align:center">DOLLAR COMPENSATION PLANS</h2>
<p style="text-align:center">Choose A Plan to Sign-Up</p>
</div>
<div id="main-container" class="clearfix">
<div class="pricealign">
<div class="columns">
  <ul class="price">
<li class="header">$10 – 85% payout</li>
<li class="grey">Level 1 - 5 = $25</li>
<li>Level 2 – 25 = $106.25</li>
<li>Level 3 – 125  =  $531.25</li>
<li>Level 4 – 625 = $2,656.25</li>
<li>Level 5 – 3125 = $13,281.25</li>
<li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
<li class="header" style="background-color:#4CAF50">$20 – 85% payout</li>
<li class="grey">Level 1 - 5 = $60</li>
<li>Level 2 – 25 = $170</li>
<li>Level 3 – 125 = $850</li>
<li>Level 4 – 625 = $4,250</li>
<li>Level 5 – 3125 = $21,250</li>
<li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
<li class="header">$50 – 85% payout</li>
<li class="grey">Level 1 - 5 = $100</li>
<li>Level 2 – 25 = $637.5</li>
<li>Level 3 – 125 = $3,187.5</li>
<li>Level 4 – 625 = $15,937.5</li>
<li>Level 5 – 3125 = $79,687.5</li>
<li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
<li class="header">$50 – 85% payout</li>
<li class="grey">Level 1 - 5 = $100</li>
<li>Level 2 – 25 = $637.5</li>
<li>Level 3 – 125 = $3,187.5</li>
<li>Level 4 – 625 = $15,937.5</li>
<li>Level 5 – 3125 = $79,687.5</li>
<li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>
  </div><!--end main-container-->

</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
        panel.style.display = "none";
    } else {
        panel.style.display = "block";
    }
}
}
</script>

<div class="planenq">
<div class="container">
<button class="button clearfix"><span><a href="#">For Enquiries</a> </span></button>

</div>
</div>

关于javascript - 难点集中价格表和按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42094000/