php - 如何并排设置2个按钮

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 只是显示在 button 1 的前面，这显然是不需要的。它们是这样显示的:

我想我应该发布我的样式表中涉及网站特定部分的部分(实际上我不确定是否是这样......)

/*=====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 是完成此任务的好方法。它的样式可以像 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/