2

我最近在我的 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>

我最近的问题以及我问这个问题的原因是，我怎样才能让按钮并排显示？目前，按钮 2 仅显示在按钮 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
========================================*/

任何帮助表示赞赏，在此先感谢您:)

4

1 回答 1

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/

于 2012-07-31T17:17:24.300 回答