Question

请参阅下面我粘贴的定价表代码的预览。然后你会看到第二和第三列被打破。所有列都不在同一级别。请修复我的代码并调整所有3列。

请参阅以下代码：

<html>
<head>
<style>
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Ubuntu, arial, verdana;
}
.pricing_table {
    line-height: 150%;
    font-size: 12px;
    margin: 0 auto;
    width: 500%;
    max-width: 800px;
    padding-top: 10px;
    margin-top: 100px;
}
.price_block {
    text-align: center;
    width: 100%;
    color: #fff;
    float: left;
    list-style-type: none;
    transition: all 0.25s;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-bottom: 1px solid transparent;
}

.pricing_table h3 {
    text-transform: uppercase;
color: #fff;
    padding: 5px 0;
    background: #A6DA18;
    margin: -10px 0 1px 0;
}

.price {
    display: table;
    background: #444;
float: center;
    width: 100%;
    height: 70px;
}
.price_figure {
    font-size: 24px;
    text-transform: uppercase;
    vertical-align: middle;
    display: table-cell;
}
.price_number {
    font-weight: bold;
    display: block;
}
.price_tenure {
    font-size: 11px;
}

.features {
    background: #DEF0F4;
    color: #000;
}
.features li {
    padding: 8px 15px;
    border-bottom: 1px solid #ccc;
    font-size: 11px;
    list-style-type: none;
}

.footer {
    padding: 15px;
    background: #DEF0F4;
}
.action_button {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    background: linear-gradient(#666, #333);
    padding: 5px 20px;
    font-size: 11px;
    text-transform: uppercase;
}

.price_block:hover {
    box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
    transform: scale(1.04) translateY(-5px);
    z-index: 1;
    border-bottom: 0 none;
}
.price_block:hover .price {
    background:linear-gradient(#DB7224, #F9B84A);
    box-shadow: inset 0 0 45px 1px #DB7224;
}
.price_block:hover h3 {
    background: #222;
}
.price_block:hover .action_button {
    background: linear-gradient(#F9B84A, #DB7224);
}

@media only screen and (min-width : 768px) and (max-width : 768px) {
    .price_block {width: 50%;}
    .price_block:nth-child(odd) {border-right: 1px solid transparent;}
    .price_block:nth-child(3) {clear: both;}
    .price_block:nth-child(odd):hover {border: 0 none;}
}
@media only screen and (min-width : 768px){
    .price_block {width: 25%;}
    .price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
    .price_block:last-child {border-right: 0 none;}
    .price_block:hover {border: 0 none;}
}


</style>
</head>

<body>
<ul class="pricing_table">
<li class="price_block">
        <h3>Pricing Table</h3>

<div class="price">
            <div class="price_figure">
                <span class="price_number">$39.99</span>
                <span class="price_tenure">Only</span>
            </div>

</div>
<ul class="features">
<li>Features 1</li>
<li>Features 2</li>
<li>Features 3</li>
<li>Features 4</li>
<li>Features 5</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>

</ul>

<ul class="pricing_table">
<li class="price_block">
        <h3>Pricing Table</h3>

<div class="price">
            <div class="price_figure">
                <span class="price_number">$39.99</span>
                <span class="price_tenure">Only</span>
            </div>

</div>
<ul class="features">
<li>Features 1</li>
<li>Features 2</li>
<li>Features 3</li>
<li>Features 4</li>
<li>Features 5</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>

</ul>
<ul class="pricing_table">
<li class="price_block">
        <h3>Pricing Table</h3>

<div class="price">
            <div class="price_figure">
                <span class="price_number">$39.99</span>
                <span class="price_tenure">Only</span>
            </div>

</div>
<ul class="features">
<li>Features 1</li>
<li>Features 2</li>
<li>Features 3</li>
<li>Features 4</li>
<li>Features 5</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>

</ul>


</body>
</html>

Answer 1

将所有li放在一个ul中，如下所示

<ul class="pricing_table">
<li class="price_block">
        <h3>Pricing Table</h3>

<div class="price">
            <div class="price_figure">
                <span class="price_number">$39.99</span>
                <span class="price_tenure">Only</span>
            </div>

</div>
<ul class="features">
<li>Features 1</li>
<li>Features 2</li>
<li>Features 3</li>
<li>Features 4</li>
<li>Features 5</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>


<li class="price_block">
        <h3>Pricing Table</h3>

<div class="price">
            <div class="price_figure">
                <span class="price_number">$39.99</span>
                <span class="price_tenure">Only</span>
            </div>

</div>
<ul class="features">
<li>Features 1</li>
<li>Features 2</li>
<li>Features 3</li>
<li>Features 4</li>
<li>Features 5</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>


<li class="price_block">
        <h3>Pricing Table</h3>

<div class="price">
            <div class="price_figure">
                <span class="price_number">$39.99</span>
                <span class="price_tenure">Only</span>
            </div>

</div>
<ul class="features">
<li>Features 1</li>
<li>Features 2</li>
<li>Features 3</li>
<li>Features 4</li>
<li>Features 5</li>
</ul>
<div class="footer">
            <a class="action_button" href="http://www.blogger.com/blogger.g?blogID=7860351751400882510#">Buy Now</a>

        </div>
</li>

</ul>

小提琴是HERE

请调整所有列（第2列和第3列已损坏）。

1 个答案: