html - 如何将垂直 css 菜单更改为水平菜单

Question

我想更改此 CSS 以使此菜单水平显示。我在互联网上搜索解决方案，发现我必须将“显示”值更改为“内联 block ”，但这并没有做到。

提前致谢

PS:我希望我以正确的方式创建这篇文章，如果不正确请向我道歉，因为这是我的第一篇文章。

CSS 代码:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family:verdana;
    font-weight:normal;
    font-size:12px;
}

ul {
    list-style:none;
    margin:0; 
    padding:0;
    width:250px;
    margin:0 auto;
    -moz-box-shadow: 0 0 5px #111;
    -webkit-box-shadow: 0 0 5px #111;
    box-shadow: 0 0 5px #111;

}

ul li label {
    background:#3e3e3e;
    border-top:1px solid:#ffffff;
    border-bottom:1px solid #ffffff;
    color: #ffffff;
    text-shadow: 0 1px 1px #000;
    letter-spacing: 0.09em;
}

ul li input[type='checkbox'] {
    display: none;
}

ul li label {
    display:block;
    padding:12px;
    width:250px;
}

ul li i {
    font-size:18px;
    vertical-align: middle;
    width:20px;
    display:inline-block;
}

ul li span {
    display:inline;
    float:right;
    background:#48515c;
    border:1px solid #3c434c;
    border-bottom:1px solid #707781;
    padding:4px 6px;
    font-size:10px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: inset 0 0 10px #111;
    -webkit-box-shadow: inset 0 0 10px #111;
    box-shadow: inner 0 0 10px #111;
    position:relative;
}

ul li label:hover {
    background: #3e3e3e;
}

ul li label:hover span {
    background:#3e3e3e;
}

ul li input[type='checkbox']:checked ~ label {
    background: #3e3e3e;
    border-top:1px solid #878e98;
    border-bottom:1px solid #878e98;
}

ul li input[type='checkbox']:checked ~ label span {
    background: #3e3e3e;
    border-top:1px solid #1b5f85;
    border-bottom:1px solid #4cb1e4;
    -moz-box-shadow: inset 0 0 5px #111;
    -webkit-box-shadow: inset 0 0 5px #111;
    box-shadow: inner 0 0 5px #111;
}

ul li input[type='checkbox']:checked ~ .options {
    height: auto;
    display:block;
    min-height:40px;
    max-height:400px;
}

ul ul {
    background:#ffffff; margin:0; padding:0;
    -moz-box-shadow: inset 0 2px 2px #b3b3b3;
    -webkit-box-shadow: inset 0 2px 2px #b3b3b3;
    box-shadow: inner 0 2px 2px #b3b3b3;
}

ul ul li a {
    padding:6px 12px;
    color:#3e3e3e;
    text-decoration:none;
}

ul ul li a:hover {
    color: #05409A;
}

ul ul li a span {
    color:#3e3e3e;
    background:none;
    border:1px solid #ccc; 
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul ul li {
    border-bottom:1px solid #ccc;
}

ul ul li:first-child {
    padding-top:6px;
}

ul ul li:last-child {
    padding-bottom:6px; border:0;
}

.options {
    height: 0;
    display: block;
    overflow: hidden;
}

HTML代码:

  <ul>
<li class="block">
    <input type="checkbox" name="item" id="item1" />   
    <label for="item1"><i aria-hidden="true"></i> Home </label>
    <ul class="options">
        <li><a href="Text/Home.html" target="TextIFrame"><i aria-hidden="true"></i> Home </a></li>
    </ul>
</li>
<li class="block">
    <input type="checkbox" name="item" id="item2" />   
    <label for="item2"><i aria-hidden="true"></i> French Tutoring </label>
    <ul class="options">
        <li><a href="Text/ChildrenKto12.html" target="TextIFrame"><i aria-hidden="true"></i> Children K to 12 </a></li>
        <li><a href="Text/Homeschool.html" target="TextIFrame"><i aria-hidden="true"></i> Homeschool </a></li>
        <li><a href="Text/APFrenchSATtraining.html" target="TextIFrame"><i aria-hidden="true"></i> AP French & SAT training </a></li>
    </ul>
</li>
<li class="block">
    <input type="checkbox" name="item" id="item3" />   
    <label for="item3"><i aria-hidden="true"></i> French Conversation </label>
    <ul class="options">
        <li><a href="Text/HighSchoolUniversity.html" target="TextIFrame"><i aria-hidden="true"></i> High School & University </a></li>
        <li><a href="Text/BasicFrenchForTravellers.html" target="TextIFrame"><i aria-hidden="true"></i> Basic French for Travelers </a></li>
        <li><a href="Text/RefreshYourFrench.html" target="TextIFrame"><i aria-hidden="true"></i> Refresh your French </a></li>
    </ul>
</li>
<li class="block">
    <input type="checkbox" name="item" id="item4" />   
    <label for="item4"><i aria-hidden="true"></i> French Immersion </label>
    <ul class="options">
      <li><a href="Text/Workschops.html" target="TextIFrame"><i aria-hidden="true"></i> Workschops </a></li>
      <li><a href="Text/SummerCamp.html" target="TextIFrame"><i aria-hidden="true"></i> Summer Camp </a></li>
    </ul>
</li>
<li class="block">
    <input type="checkbox" name="item" id="item5" />   
    <label for="item5"><i aria-hidden="true"></i> About Us </label>
    <ul class="options">
        <li><a href="Text/ContactUs.html" target="TextIFrame"><i aria-hidden="true"></i> Contact Us </a></li>
        <li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Testimonies </a></li>
        <li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Curriculum Vitae </a></li>
        <li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Reference letter</a></li>
        <li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Photos </a></li>
        <li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Links</a></li> 
    </ul>
</li>

Answer 1

试试这个 CSS:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family:verdana;
    font-weight:normal;
    font-size:12px;
}

ul {
    list-style:none;
    margin:0; 
    padding:0;
    /*width:250px;*/
    margin:0 auto;
    -moz-box-shadow: 0 0 5px #111;
    -webkit-box-shadow: 0 0 5px #111;
    box-shadow: 0 0 5px #111;

}
ul li.block { float:left; }
ul li label {
    background:#3e3e3e;
    border-top:1px solid:#ffffff;
    border-bottom:1px solid #ffffff;
    color: #ffffff;
    text-shadow: 0 1px 1px #000;
    letter-spacing: 0.09em;
}

ul li input[type='checkbox'] {
    display: none;
}

ul li label {
    display:block;
    padding:12px;
    /*width:250px;*/
}

ul li i {
    font-size:18px;
    vertical-align: middle;
    width:20px;
    display:inline-block;
}

ul li span {
    display:inline;
    float:right;
    background:#48515c;
    border:1px solid #3c434c;
    border-bottom:1px solid #707781;
    padding:4px 6px;
    font-size:10px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: inset 0 0 10px #111;
    -webkit-box-shadow: inset 0 0 10px #111;
    box-shadow: inner 0 0 10px #111;
    position:relative;
}

ul li label:hover {
    background: #3e3e3e;
}

ul li label:hover span {
    background:#3e3e3e;
}

ul li input[type='checkbox']:checked ~ label {
    background: #3e3e3e;
    border-top:1px solid #878e98;
    border-bottom:1px solid #878e98;
}

ul li input[type='checkbox']:checked ~ label span {
    background: #3e3e3e;
    border-top:1px solid #1b5f85;
    border-bottom:1px solid #4cb1e4;
    -moz-box-shadow: inset 0 0 5px #111;
    -webkit-box-shadow: inset 0 0 5px #111;
    box-shadow: inner 0 0 5px #111;
}

ul li input[type='checkbox']:checked ~ .options {
    height: auto;
    display:block;
    min-height:40px;
    max-height:400px;
}

ul ul {
    background:#ffffff; margin:0; padding:0;
    -moz-box-shadow: inset 0 2px 2px #b3b3b3;
    -webkit-box-shadow: inset 0 2px 2px #b3b3b3;
    box-shadow: inner 0 2px 2px #b3b3b3;
}

ul ul li a {
    padding:6px 12px;
    color:#3e3e3e;
    text-decoration:none;
}

ul ul li a:hover {
    color: #05409A;
}

ul ul li a span {
    color:#3e3e3e;
    background:none;
    border:1px solid #ccc; 
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul ul li {
    border-bottom:1px solid #ccc;
}

ul ul li:first-child {
    padding-top:6px;
}

ul ul li:last-child {
    padding-bottom:6px; border:0;
}

.options {
    height: 0;
    display: block;
    overflow: hidden;
}

我删除了父 UL 上的宽度，向父 LI 添加了一个“float:left”，并从标签中删除了宽度。希望这会有所帮助。