Question

所以我已经在这个工作了好几个小时..我在导航栏中有一个问题，内容拒绝显示：内联。以前的版本工作得很好但是太杂乱了，代码明智。这是我的代码。

CSS：

body {
    background-color: #5C7584;
    margin: 0 auto;
    //width: 1000px;
    width: 100%;
    margin-top: 10px;
}

#canvas {
    width: 1000px;
    margin: 0 auto;
    background-color: white;
}

a {
    color: #4086b6;
    text-decoration: none;
}

///////////////////////////////////

ul, li {
    list-style: none;

}



ul li {
    //padding-right: 10px;
    //padding-left: 10px;
    //display: inline;
}

.parentClass {
    display: inline;
    //position: relative;
    list-style: none;
    //float: left;
}

.dropDown {
    position: relative;
    background-color: lightcyan;
    display: block;
    list-style: inherit;
    //text-align: right;
    //background-color: lightcyan;
    width: auto;
    height: 0px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -ms-transition: all .25s;
    -o-transition: all .25s;
    transition: all .5s;
}

#linkline{

}

.parentClass:hover {
    background-color: lightcyan;
}

.parentClass:hover .dropdown {
    opacity: 1;
    visibility: visible;
    height: auto;
}




/////////////////////////////




#toplinks a {
    //padding-left: 0px;
    text-shadow: 1px 1px lightgrey;
}
#toplinks a:hover {
    color: lightskyblue;
    //border-radius: 50px 50px;
}

#toplinks a:active {
    color: white;
}



#top {
    height: 102px;
    background-image: url("../assets/topbar_plain.png");
    background-color: white;
    opacity: .9;
    z-index: 2;
    position: relative;
}



#toplinks {
    float: right;
    width: 500px;
    text-align: right;
    padding-right: 30px;
    padding-top: 70px;
}

#logo {
    background-image: url("../assets/logo_plain.png");
    width: 102px;
    height: 33px;
    float: left;
    background-repeat: no-repeat;
    margin-top: 40px;
    margin-left: 80px;  
}

HTML：

<div id="top" >
    <div id="canvas">
        <a href="index.php" id="logo">  </a>
        <div id="toplinks"> 


        <ul class="linkline">   
            <li id="indexx" class="parentClass"><a href="./index.php">Overview</a> 
                    <ul></ul>
            </li> 

            <li class="parentClass"><a href="#">Services</a> 
                <ul class="dropDown">
                    <li class="c2"> <a href="./ddos_mitigation.php">DDoS Mitigation</a> </li>
                    <li class="c1"> <a href="./serverhosting.php">Server Hosting</a> </li>

                </ul>
            </li> 


            <li class="parentClass"><a href="#">AboutUs</a>
                <ul class="dropDown">
                    <li class="c2"> <a href="#">Link 1</a> </li>
                    <li class="c1"> <a href="#">Link 2</a> </li>
                    <li class="c2"> <a href="#">Link 3</a> </li>
                </ul>
            </li>
        </ul>

        </div>
    </div>      
</div>

Answer 1

尝试：

angular.forEach

Answer 2

＆＃13;

ul {
  list-style: none;
  }

li {
  float: left;
  display: block;
  margin: 0 1em 0 0;
  border: 1px solid purple;
  }

＆＃13;

<ul>
  <li>Menu item 1</li>
  <li>Menu item 2</li>
  </ul>

＆＃13;

嗨，我将代码简化为列表及其样式，这是您需要修复的内容。确保ul是list-style none，并且该列表中的li是float left display block，然后是那里的样式。

Answer 3

由于嵌套在<ul class="dropDown">内的<li class="parentClass">，看起来很奇怪。试试这个开头：

.dropDown {
  display: none;
}

.parentClass {
  display: inline-block;
}

Answer 4

尝试更改 parentClass 。

.parentClass {
    display: inline-block;
    position: relative;
    list-style: none;
    float: left;
}

css显示内联不起作用

4 个答案: