gpt4 book ai didi

html-lists - ul li 显示内联 block 不水平显示

转载 作者:行者123 更新时间:2023-11-28 11:36:00 25 4
gpt4 key购买 nike

我的一切工作正常,然后我清理了 CSS 并移动了一些东西。我失去了我的水平菜单栏,它都是垂直的:$

我一直在 tweeking 和网站上搜索了几个小时,但仍然一无所获。可能是我的代码中的一个简单错误。我很确定它在 CSS 中。

宁愿不必使用 float ....

感谢您的协助....

我的代码可能比需要的多一点。这是从哪里得到的 http://www.youtube.com/watch?v=PN1iMaVfzfQ

网站: http://www.enhancedliving.ca/

CSS:

#menu_Box{   /*MENU BOX CONTAINER*/
width: 890px;
height: 100%;
margin: 0 auto;
padding-left: 10px;
}
#menu_Box ul{ /*MENU BOX STYLE*/
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#263A75;
font-size:24px;
font-weight:normal;
padding:0 0 0 10px;
margin:0;
position:relative;
}
.extraStyle{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#263A75;
font-size:24px;
font-weight:normal;
padding:0;
margin:0;
}
#menu_Box ul li{
display:inline-block;
}
#menu_Box ul li:hover{
color:#456692;
}
#menu_Box ul li a,visited{
text-align:left;
color:#263A75;
display:block;
padding: 0 0 0 0; /*Padding between titles*/
text-decoration:none;
}
#menu_Box ul li a:hover{
color:#456692;
text-decoration:none;
}
#menu_Box ul li:hover ul{
display:block;
}

/* ############### DROP DOWN MENU BOX ################ */

#menu_Box ul ul{ /*Drop Down Box*/
border: 3px solid rgba(0, 57, 96, .85) ;
display:none;
position:absolute;
background-color: rgba(139, 183, 212, .9);
padding: 3px; /*Padding between list items*/
}
#menu_Box ul ul li{ /*Drop Down Style*/
display: block;
}
#menu_Box ul ul li a,visited{
color:#263A75;
}
#menu_Box ul ul li a:hover{
color:#456692;
}

HTML:

<ul>

<li><a href="http://www.enhancedliving.ca/index.php">Services</a>

<ul>
<li><a href="http://www.enhancedliving.ca/index.php#headerH2pk">Psych-K</a> </li>
<li><a href="http://www.enhancedliving.ca/index.php#headerH2fat">Food & Environmental Allergy and Sensitivity Testing</a> </li>
<li><a href="http://www.enhancedliving.ca/index.php#headerH2sne">Supplement and Nutrition Evaluation</a> </li>
<li><a href="http://www.enhancedliving.ca/index.php#headerH2fvt">Food Value Testing</a> </li>
</ul>
</li> <p class="extraStyle">::</p>


<li><a href="http://www.enhancedliving.ca/sessions.php">Sessions</a> </li> <p class="extraStyle">::</p>

<li><a href="http://www.enhancedliving.ca/bio.php">Biography</a> </li> <p class="extraStyle">::</p>

<li><a href="http://www.enhancedliving.ca/forums.php">Health Topics</a> </li><p class="extraStyle">::</p>

<li><a href="http://www.enhancedliving.ca/products.php">Favorite Products</a> </li><p class="extraStyle">::</p>

<li><a href="http://www.enhancedliving.ca/contact.php">Contact</a> </li>

</ul>

最佳答案

改变

<p class="extraStyle">::</p>

进入

<span class="extraStyle">::</span> 

关于html-lists - ul li 显示内联 block 不水平显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20923095/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com