0

最終的にスワイプできるようにしたいナビゲーションアイテムのリストがあるので、最初はテスト用に幅が1000％で、リンクがインラインブロックに配置されている順序付けされていないリストを作成しました。これは、ページの幅全体を埋めるのに十分なリンクがある場合にうまく機能しますが、リンクが数個しかない場合は、ナビゲーションの左側にスタックします。理想的には、これらを中央に配置します。ナビゲーションに追加しようとしtext-align: centerましたが、これにより、リンクが100％のページ幅ではなく、1000％の幅のスペースに中央揃えされます。これはCSSだけで達成できるかもしれないと思ったので、誰かが解決策を推奨できますか？

JS Fiddle（いくつかのリンクのみ）：http：//jsfiddle.net/HS4VE/

CSS

nav {
    padding: 10px 0;
    overflow: hidden;
    text-align: center;
    border: 1px solid #cccccc;
    border-left: 0;
    border-right: 0;
}

nav li {
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    margin-right: -4px;
    position: relative;
}

nav a {
    color: white;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #454545), color-stop(100%, #363636));
    background-image: -webkit-linear-gradient(#454545, #363636);
    background-image: -moz-linear-gradient(#454545, #363636);
    background-image: -o-linear-gradient(#454545, #363636);
    background-image: linear-gradient(#454545, #363636);
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 0 15px;
    width: 186px;
    display: block;
    border-right: 1px solid white;
    text-align: center;
  }

nav a.is-active {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fe57ae), to(#fe329b));
background-image: -webkit-linear-gradient(#fe57ae, #fe329b);
background-image: -moz-linear-gradient(#fe57ae, #fe329b);
background-image: -o-linear-gradient(#fe57ae, #fe329b);
background-image: linear-gradient(#fe57ae, #fe329b);
}

.inner {
    width: 1000%;
}
4

1 に答える 1

2

これを使って：

.inner {
    white-space:nowrap;
    max-width: 1000%;
}

デモ： http： //jsfiddle.net/HS4VE/3/

于 2013-03-22T15:43:11.827 に答える