1

画像の横にある青い div の真ん中に 2 つのリンク ボタンのみを表示したいという問題があります。

私はこのようなものが欲しい

link1   {space} link2
{space}
link3    {space} link 4

現在はこんな感じです

link1
link2
link3
link4

ここに私のコードHTMLがあります

<div class="list-wrapper">
<div class="my-background">
    <div class="div1" style="float:left;"> </div>

        <span class="buttons">
         <a class="buttonStyling" href="test.com"><b>Link 1</b></a>
        <a class="buttonStyling" href="test.com"><b>Link 2</b> </a>
         <a class="buttonStyling" href="test.com"><b>Link 3</b> </a>
        <a class="buttonStyling" href="test.com"><b>Link 4</b> </a>
        </span>
</div>​

CSS

.my-background{
    background-color: #8af0fc;
    height: 204px;
}
.div1 {
    height: 205px;
    background:  url(http://www.dynamicdrive.com/dynamicindex4/lightbox2/horses.jpg) no-repeat;
    background-size: 435px;
    font-weight: normal;
    font-family: futura, arial, sans-serif;
    text-align: center;
    width:256px;
    margin-bottom: -20%;
}
.buttons .buttonStyling{

    display: block;
    height: 40px;
    text-align: center;
    line-height: 40px;
    width: 35%;
    float:right;

}

.buttonStyling {

    background: rgb(255, 255, 255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(33%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(225, 225, 225, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%);
    background: linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%);     color: #333;
}

ここにjsfiddleがあります

http://jsfiddle.net/cUWn8/4/

4

3 に答える 3

2
  1. フロートを取り除く
  2. 表示を追加: インラインブロック
  3. 必要な間隔の余白を追加します

このCSSを使用

.buttons .buttonStyling{

    display: inline-block;
    height: 40px;
    text-align: center;
    line-height: 40px;
    width: 35%;
   margin: 0 50px 50px 0; //or however much space you want
}

上記の変更のフィドルは次のとおりです

于 2012-09-12T20:24:15.970 に答える
0

これを試してください：http://jsfiddle.net/cUWn8/5/

基本的に、すべてをカーペット爆撃するのでfloatはなく、偶数ボタンにのみ適用すると、説明した配置が生成されます。(1 と 2) と (3 と 4) の間の垂直方向のスペースを取得するには、margin-top#2 の後にボタンに追加します。また、すべてのボタンを にする必要がありますdisplay: inline-block。

主な CSS の変更は次のとおりです。

.buttons .buttonStyling { display: inline-block; }
.buttonStyling:nth-of-type(even) { float: right; }
.buttonStyling:nth-of-type(2) ~ .buttonStyling{ margin-top: 50px; }

さらに、既存のfloatプロパティ on.buttons .buttonStylingおよび inline on を削除しdiv1ます。

于 2012-09-12T20:33:06.847 に答える
0

それをクリーンアップして、.buttons スパンに最大幅を設定します。これを試してみてください: jsFiddle

于 2012-09-12T20:33:54.817 に答える