0

私はこの質問がこのサイトで何度も尋ねられていることを認識しています。他の多くの、おそらく何度も、私は多くの異なる解決策を試しましたが、適合する解決策を思いつきませんでした。非表示で自動中央揃えしようとしていますどこが間違っているのか教えてくれる CSS マスターはいますか? 久しぶりに頭をぶつけました。これが私の フィドルです。ご協力ありがとうございます。

フィドルを伴う必要があるため、これが私のCSSです

CSS

 body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}
.navigation {
    position: relative;
    left: 15%;
    padding: 0 auto;
    list-style: none;
    text-align: center;
    display: inline-block;
}
.navigation li {
    float: left;
    width: 150px;
    position: relative;
}
.navigation li a {
    background: #262626;
    color: #fff;
    display: block;
    padding: 8px 7px 8px 7px;
    text-decoration: none;
    border-top: 1px solid #F2861D;
    text-align: center;
    text-transform: uppercase;
}
.navigation li a:hover {
    color: #F2861D;
}
.navigation ul {
    position: absolute;
    left: 0;
    display: none;
    margin: 0 0 0 -1px;
    padding: 0;
    list-style: none;
    border-bottom: 3px solid #F2861D;
}
.navigation ul li {
    width: 150px;
    border-top: none;
}
.navigation ul a {
    display: block;
    height: 15px;
    padding: 8px 7px 13px 7px;
    color: #fff;
    text-decoration: none;
    border-top: none;
    border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
    color: #F2861D;
}

これは私が得た最も近いものです。margin: 0 auto と margin-left:auto; を試しました。margin-right:auto; しかし、それらを機能させることができないようです。

4

3 に答える 3

0

これを使って：

変更は position: absolute from relativeおよび margin-left:auto; です。margin-right:auto

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}
.navigation {
    position: absolute;
    padding: 0 auto;
    list-style: none;
    text-align: center;
    display: inline-block;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
.navigation li {
    float: left;
    width: 150px;
    position: relative;
}
.navigation li a {
    background: #262626;
    color: #fff;
    display: block;
    padding: 8px 7px 8px 7px;
    text-decoration: none;
    border-top: 1px solid #F2861D;
    text-align: center;
    text-transform: uppercase;
}
.navigation li a:hover {
    color: #F2861D;
}
.navigation ul {
    position: absolute;
    left: 0;
    display: none;
    margin: 0 0 0 -1px;
    padding: 0;
    list-style: none;
    border-bottom: 3px solid #F2861D;
}
.navigation ul li {
    width: 150px;
    border-top: none;
}
.navigation ul a {
    display: block;
    height: 15px;
    padding: 8px 7px 13px 7px;
    color: #fff;
    text-decoration: none;
    border-top: none;
    border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
    color: #F2861D;
}
于 2013-08-02T11:53:45.533 に答える