如何並排設置2個按鈕

Question

我最近在wordpress博客上安裝並修改了某個模板。所有的修改都非常簡單（刪除我不想要的div），但請考慮一下我完全不瞭解網頁設計的事實。

就像我在前面的問題中解釋的，我試圖並排顯示兩個按鈕，每個按鈕都鏈接到我的網站中的特定頁面。

我的第一個挫折是試圖讓他們顯示，因爲模板解析了明文而不是將短代碼轉換爲按鈕（我使用了一個名爲MaxButtons的插件 - 對於那些不知道它的人它使得按鈕的創建和管理變得更簡單）。幸運的是，我在一個使用do_shortcode函數的stackoverflow成員的幫助下克服了這個問題。現在，我的代碼如下所示：

<div class="slider-wrapper"> 

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

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

我最近的問題，爲什麼我問這個問題的原因是，我怎麼能得到並排顯示側面的按鈕？此刻，button2只顯示在按鈕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是做到這一點的好辦法。它可以像塊元素一樣設計，但不強制換行。

由於您正在使用簡碼顯示按鈕標記，因此我們無法幫助您使用精確的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> 

在您需要添加顯示這兩種情況下：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/