我为此工作了几个小时,但没有得到任何结果。我想要做的是将这 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 代码修复它,但没有结果。
你知道如何实现我所需要的吗?
谢谢