0

我为此工作了几个小时，但没有得到任何结果。我想要做的是将这 3 个框显示在页面中心的一行中，框之间的空格宽度相同。

这是代码：

#instagram-home{
border: 1px solid #000;
padding: 10px;
margin-left: 18px;
width: 29%;
border-radius:10px;
background: #f0f0f0;
color:#fff;
text-align: justify;
}


#innergram{
padding: 10px;
background: #990000;

}

#instagram-home h2{
text-align: center;

font-size: 20px;
margin-top: 1px;
}

.classname {

    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
    box-shadow:inset 0px 0px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8) );
    background:-moz-linear-gradient( center top, #2060bf 5%, #3fb8e8 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
    background-color:#2060bf;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:1px solid #120407;
    display:inline-block;
    color:#fafafa;
    font-family:arial;
    font-size:16px;
    font-weight:bold;
    padding:7px 16px;
    text-decoration:none;
    text-shadow:1px 1px 7px #4f144f;
}.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf) );
    background:-moz-linear-gradient( center top, #3fb8e8 5%, #2060bf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
    background-color:#3fb8e8;
}.classname:active {
    position:relative;
    top:1px;
}


#pinterest-home{
border: 1px solid #000;
padding: 10px;
margin-left: 18px;
width: 29%;
border-radius:10px;
background: #f0f0f0;
color:#fff;
}


#innerpin{
padding: 10px;
background: #990000;
}

#pinterest-home h2{
text-align: center;
border-bottom: 5px solid #000;
padding-bottom: 20px;
font-size: 20px;
margin-top: 1px;
}

.classname {

    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
    box-shadow:inset 0px 0px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8) );
    background:-moz-linear-gradient( center top, #2060bf 5%, #3fb8e8 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
    background-color:#2060bf;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:1px solid #120407;
    display:inline-block;
    color:#fafafa;
    font-family:arial;
    font-size:16px;
    font-weight:bold;
    padding:7px 16px;
    text-decoration:none;
    text-shadow:1px 1px 7px #4f144f;
}.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf) );
    background:-moz-linear-gradient( center top, #3fb8e8 5%, #2060bf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
    background-color:#3fb8e8;
}.classname:active {
    position:relative;
    top:1px;
}


#twitter-home{
border: 1px solid #000;
padding: 10px;
margin-left: 18px;
width: 29%;
border-radius:10px;
background: #f0f0f0;
color:#fff;
text-align: justify;
}


#innertweet{
padding: 10px;
background: #990000;
}

#twitter-home h2{
text-align: center;
border-bottom: 5px solid #000;
padding-bottom: 20px;
font-size: 20px;
margin-top: 1px;
}

.classname {

    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
    box-shadow:inset 0px 0px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8) );
    background:-moz-linear-gradient( center top, #2060bf 5%, #3fb8e8 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
    background-color:#2060bf;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:1px solid #120407;
    display:inline-block;
    color:#fafafa;
    font-family:arial;
    font-size:16px;
    font-weight:bold;
    padding:7px 16px;
    text-decoration:none;
    text-shadow:1px 1px 7px #4f144f;
}.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf) );
    background:-moz-linear-gradient( center top, #3fb8e8 5%, #2060bf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
    background-color:#3fb8e8;
}.classname:active {
    position:relative;
    top:1px;
}


<ul style="display:inline; list-style-type:none;">
<li>
<div id='pinterest-home'>
<div id='innerpin'>
<h2><?php echo get_option('add_the_boxes_to_pages_title'); ?></h2>
<p><?php echo get_option('add_the_boxes_to_pages_explanation'); ?></p>
<center><a href="#" class="classname">Order Now</a></center>
</div>
</div>
</li>
<li>
<div id='twitter-home'>
<div id='innertweet'>
<h2><?php echo get_option('add_the_boxes_to_pages_tweettitle'); ?></h2>
<p><?php echo get_option('add_the_boxes_to_pages_explanationtweet'); ?></p>
<center><a href="#" class="classname">Order Now</a></center>
</div>
</div>
</li>
<li>
<div id='instagram-home'>
<div id='innergram'>
<h2><?php echo get_option('add_the_boxes_to_pages_instatitle'); ?></h2>
<p><?php echo get_option('add_the_boxes_to_pages_instaexplanation'); ?></p>
<center><a href="<?php echo get_option('add_the_pageurl1');?>" class="classname">Order Now</a></center>
</div>
</div>
</li>
</ul>

小提琴来源：http: //jsfiddle.net/eA3hp/

我曾尝试使用 table 和最后 ul li 代码修复它，但没有结果。

你知道如何实现我所需要的吗？

谢谢

4

1 回答 1

0

像这样？（它仍然很乱，但我希望你能明白）

HTML：

<ul class="list-holder">
    <li class="home">
        <div class='inner'>
             <h2>TEST!</h2>

            <p>TESTER</p>
            <center><a href="#" class="classname">Order Now</a>
            </center>
        </div>
    </li>
    <li class="home">
        <div class='inner'>
             <h2>TEST!</h2>

            <p>TESTER</p>
            <center><a href="#" class="classname">Order Now</a>
            </center>
        </div>
    </li>
    <li class="home">
        <div class='inner'>
             <h2>TEST!</h2>

            <p>TESTER</p>
            <center><a href="#" class="classname">Order Now</a>
            </center>
        </div>
    </li>
</ul>

CSS：

.list-holder {
    background:#456456;
    list-style-type:none;
    width:100%;
}
.classname {
    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
    box-shadow:inset 0px 0px 0px 0px #ffffff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8));
    background:-moz-linear-gradient(center top, #2060bf 5%, #3fb8e8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
    background-color:#2060bf;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:1px solid #120407;
    display:inline-block;
    color:#fafafa;
    font-family:arial;
    font-size:16px;
    font-weight:bold;
    padding:7px 16px;
    text-decoration:none;
    text-shadow:1px 1px 7px #4f144f;
}
.classname:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf));
    background:-moz-linear-gradient(center top, #3fb8e8 5%, #2060bf 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
    background-color:#3fb8e8;
}
.classname:active {
    position:relative;
    top:1px;
}
.home {
    border: 1px solid #000;
    padding: 10px;
    width: 29%;
    border-radius:10px;
    background: #f0f0f0;
    color:#fff;
    text-align: justify;
    display:inline-block;
}
.inner {
    padding: 10px;
    background: #990000;
}
.home h2 {
    text-align: center;
    border-bottom: 5px solid #000;
    padding-bottom: 20px;
    font-size: 20px;
    margin-top: 1px;
}
.classname {
    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
    box-shadow:inset 0px 0px 0px 0px #ffffff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2060bf), color-stop(1, #3fb8e8));
    background:-moz-linear-gradient(center top, #2060bf 5%, #3fb8e8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2060bf', endColorstr='#3fb8e8');
    background-color:#2060bf;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:1px solid #120407;
    display:inline-block;
    color:#fafafa;
    font-family:arial;
    font-size:16px;
    font-weight:bold;
    padding:7px 16px;
    text-decoration:none;
    text-shadow:1px 1px 7px #4f144f;
}
.classname:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3fb8e8), color-stop(1, #2060bf));
    background:-moz-linear-gradient(center top, #3fb8e8 5%, #2060bf 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fb8e8', endColorstr='#2060bf');
    background-color:#3fb8e8;
}
.classname:active {
    position:relative;
    top:1px;
}

小提琴：http: //jsfiddle.net/VN3AS/

于 2013-07-23T09:36:11.707 回答