2

最近、ワードプレスのブログに特定のテンプレートをインストールして変更しました。すべての変更は非常に簡単です（私が望まなかったdivを削除する）が、私がWebデザインについてほとんど何も知らないという事実を考慮してください。

前の質問で説明したように、2つのボタンを並べて表示しようとしています。各ボタンは、私のWebサイトの特定のページにリンクしています。

テンプレートがショートコードをボタンに変換する代わりにクリアテキストを解析したので、私の最初の挫折はそれらを表示させようとしたことでした（私は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
========================================*/

どんな助けでもありがたいです、前もってありがとう:)

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... */
}

その結果、2つのボタンが同じ行に隣り合って配置されます。

さらに読む：http ：//designshack.net/articles/css/whats-the-deal-with-display-inline-block/

于 2012-07-31T17:17:24.300 に答える