Question

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

提前致谢，

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 code：

  <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：

＆＃13;

* {
    -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;
}

＆＃13;

我删除了父UL上的宽度，添加了一个＆＃39; float：left＆＃39;到父LI，并从标签中删除宽度。希望这会有所帮助。

Answer 2

首先，你必须为列表设置一个新的宽度，实际的宽度要小到包含多个项目的范围

ul { 
   ...
   width: 100%; /* for example */
   ...
}

然后，您的项目必须以内联方式显示（但保留一些块属性）

ul li { 
    display: inline-block; 
}

这是一个好的开始，现在你可以根据需要进行调整

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

2 个答案: