0

slicknavのメニュー メニュー ボタンを中央に配置したい。試してみましたが、何も機能しません。左に揃えることはできますが、中央に揃えることはできません。

サンプルマークアップはこちら

<ul id="menu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

とjs

$(function() {
  $('#menu').slicknav();
});

ここにcodepenリンクがあります http://codepen.io/anon/pen/oLWpao

4

3 に答える 3

1

私は私の質問に対する解決策を見つけました。

cssを追加しただけ

.slicknav_menu {
  display: block;
  text-align: center;
  width: 100%;
}
.slicknav_btn {
  display: inline-block;
  float: none;
  text-align: center;
}

これで私の問題は解決しました。

ここにcodepenリンクがあります：http://codepen.io/anon/pen/OXmQLG

于 2016-07-01T08:24:49.967 に答える
0

ブラウザの検査を確認してください。すべての要素には display: ブロックが与えられ、全幅になります。'.slicknav_nav a' on display: inline-block と li 親を text-center に設定すると、すべてが希望どおりになります。

.slicknav_nav a {
  display: inline-block; // instead of block;
}

.slicknav_nav li {
  text-align: center;
}

これは役に立つ情報かもしれません: display: inline と display: inline-block の違いは何ですか?

于 2016-07-01T08:24:36.920 に答える