Question

我最近在wordpress博客上安装并修改了某个模板。所有修改都非常简单（删除我不想要的div），但请考虑一下我对网页设计几乎一无所知的事实。

就像我在上一个问题中解释的那样，我试图并排显示两个按钮，每个按钮都链接到我网站上的特定页面。

我的第一个挫折是试图让它们显示，因为模板解析了明文而不是将短代码转换为按钮（我使用的是一个名为MaxButtons的插件 - 对于那些不了解它的人来说，它使按钮的创建和管理更简单）。值得庆幸的是，我在stackoverflow成员的帮助下克服了它，他告诉我使用do_shortcode函数。现在，我的代码看起来像这样：

<div class="slider-wrapper">

    <div class="full_content">
    <center>
                       <h1></h1><h1></h1>
                       <h2></h2> 
             <p></p>
            <p></p>

    </center>
    </div>
</div>

我最近的问题以及我问这个问题的原因是，如何让按钮并排显示？此刻，button2只显示在按钮1的前面，这显然是不需要的。它们显示如下：

How the buttons show

我想我应该发布我的样式表中引用该网站特定部分的部分（我实际上不确定这是不是..）

/*=====Slider-Style Start
========================================*/
.slider-wrapper {
    width:950px;
    height:400px;
    background:url(images/slide-shaddow.png) 85px 334px no-repeat;
    margin-bottom:0px;
}
#container {
    width:581px;
    margin:0 auto;
    position:relative;
    float:left;
    z-index:0;
    background-color:#fff;
}
#example {
    width:581px;
    height:333px;
    position:relative;
    margin-left:0;
    background-color:#fff;
}
#frame {
    position:absolute;
    z-index:0;
    width:739px;
    height:341px;
    top:-3px;
    left:-80px;
}
/*
        Slideshow
*/

#slides {
    position:absolute;
    top:15px;
    left:0px;
    z-index:10;
    background-color:#fff;
}
.slides_container {
    width:581px;
    overflow:hidden;
    position:relative;
    display:none;
    background-color:#fff;
}
.slides_container div.slide {
    width:581px;
    height:325.4px;
    display:block;
    background-color:#fff;
}
.slides_container div.slide img, .slides_container div.slide iframe{
    width:581px;
    height:325.4px;
}
/*
        Next/prev buttons
*/

#slides .next {
    position:absolute;
    top:107px;
    right:-220px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}
#slides .prev {
    position:absolute;
    top:107px;
    left:-25px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}
#slides .next {
    left:585px;
}
/*
        Pagination
*/

.pagination {
    margin:26px auto 0;
    width:100px;
    position:absolute;
    left:25px;
    bottom:-25px;
    z-index:9999999px;
}
.pagination li {
    float:left;
    margin:0 2px;
    list-style:none;
}
.pagination li a {
    display:block;
    width:13px;
    height:0px;
    padding-top:13px;
    background-image:url(images/pagination.png);
    background-position:0 0px;
    float:left;
    overflow:hidden;
}
.pagination li.current a {
    background-position:0 -13px;
}
.slider-info {
    margin-top:15px;
    padding-top:25px;
    padding-left:23px;
    padding-right:20px;
    height:299.3px;
    width:326px;
    float:right;
    border-top:1px dotted #888;
    background-color:#fff;
}
.slider-info h1 {
    font-size:26px;
    line-height:35px;
    margin-bottom:30px;
}
.slider-info p {
    line-height:24px;
    text-shadow: .1px .1px .1px #aaa;
    font-size:14px;
}
/*=====Slider-Style End
========================================*/

感谢任何帮助，提前谢谢你：）

Answer 1

display: inline-block是实现这一目标的好方法。它可以像块元素一样设置样式，但不会强制换行。

由于您使用短代码来显示按钮标记，因此我们无法帮助您了解确切的css规则。我猜它会输出这样的东西：

<p>This is a button: <a href="/1" class="button">Button</a> 
<a href="/2" class="button">Button</a>]</p>

或者这个：

<p>This is a button: <button class="button">Button</button> 
<button class="button">Button</button></p>

在任何一种情况下，你都会添加display：inline-block;到定位按钮元素的类：

.button {
    display: inline-block;
    /* add more crazy CSS3 stuff like rounded corners and gradients... */
}

结果是两个按钮在同一行中彼此相邻。

进一步阅读：http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

如何并排设置2个按钮

1 个答案: