css - 我想将这些框显示在页面中央的一行中，并具有相同的宽度空间

标签 css center

我为此工作了几个小时，但没有得到任何结果。我想要做的是将这 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>

fiddle 来源:http://jsfiddle.net/eA3hp/

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

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

谢谢

最佳答案

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

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;
}

fiddle :http://jsfiddle.net/VN3AS/

关于css - 我想将这些框显示在页面中央的一行中，并具有相同的宽度空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17805747/

上一篇：html - 我怎样才能让 CSS-Transforms 工作

下一篇：css - Rails 3 命令将我的 CSS 样式表的文本嵌入到 HTML 的头部

相关文章：

objective-c - NSCollectionView 中的居中项目

Swift:如何调整 UIView 大小并保持内容居中？

html - 居中我的菜单的文本

html - 推到下一行时居中 div 内容

jquery - 调整窗口大小时用另一个 div 替换 div

css - 背景图片随机丢失

javascript - 无法实现 Webpack css-loader，编译时出错

html - 你如何居中漂浮？

html - 我的链接不起作用(应该很简单)

jquery - 如何使用 css 在同一位置显示 2 个元素？

©2024 IT工具网  联系我们