1

このソリューションを使用して、ページに「いいね」ボタンをインラインで配置しています。基本的に、ボタンは 内liの要素内に配置されますul。これまでのところ、それは機能します。

ボタンはマイページのフッターにあります。問題は、ページを中央に配置したいときに、ページの左側に配置されることです。考えられることはすべて試しましたが、水平方向に中央に配置できないようです。

ここに JSFiddle を設定しました。(Bootstrap は依存関係であることがわかります。私のサイトでは Bootstrap を使用しているため、必要に応じて回答で利用できますが、そうする必要はありません。)

ありがとう。

4

3 に答える 3

3

いくつかのこと。ULが左に浮いているのはなぜですか？これは、あなたが何をしても、その要素を強制的に左に移動させます。ul に幅を設定した場合、350px をテストしてから、左右の余白を自動に設定すると、中央に表示されるはずです。また、著作権が下部に留まるように、'clearfix' div を ul に追加する必要があります。以下の私のコードを参照してください：

HTML の例:

<ul>
    <li>.....<li>
    <li>.....</li>
    etc....
    <div class="clearfix"></div>
</ul>

CSS（修正済み）：

ul.like-buttons{
list-style: none;
margin: 5px auto 20px auto;
padding: 0;
width: 350px;
}

CSS Clearfix:

.clearfix {
    clear:both;
}

したがって、ul のフロートを取り除き、ul の幅を定義し、左右の自動マージンを中央に設定し、clearfix を使用して、ul の垂直方向の高さが適切になるようにしました。

于 2012-10-08T02:15:26.653 に答える