Question

我正在尝试创建一个水平导航菜单，但是尽管插入了display: inline，菜单仍然以垂直方式显示。

这是代码：

HTML：

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>blivori.net - Web Design and Development</title>
        <meta name="description" content="Brian Livori's personal website. " />
        <link href='http://fonts.googleapis.com/css?family=Michroma|Prosto+One|Maven+Pro:500,400|Playfair+Display+SC' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <header>
        <div class="header-container">  
        <div class="left-side-header">          
            <div id="logo">
                <h1>blivori.net</h1>
                <h2>{Web Design and Development}</h2>           
            </div>
        </div>  
            <div class="middle-header"></div>
            <div class="right-side-header">
                <div class="navmenu">
                    <nav>
                        <ul>
                            <li><a href="Home.html">Home</a></li>
                            <li><a href="Services.html">Services</a></li>
                            <li><a href="AboutMe.html">About Me</a></li>
                            <li><a href="Portfolio.html">Portfolio</a></li>
                            <li><a href="News.html">News</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>      
    </header>
    <body>

    </body>
</html>

CSS：

html {
  max-width: 1000px;
  margin: 0 auto;
  background: #eee; /* Fills the page */
}

/-------HEADER---------/

#logo {
    font-family: 'Michroma', sans-serif;
    font-family: 'Prosto One', cursive;
    font-family: 'Maven Pro', sans-serif;
    font-family: 'Playfair Display SC', serif;
}

#logo h1 {
    font-size: 32pt;
    line-height: 10%;
}

#logo h2 {
    font-size: 8pt;
    line-height: 0%;
    padding-left: 2px;
}

.header-container {
    width: 80%;
    font-family: 'Michroma', sans-serif;
    font-family: 'Prosto One', cursive;
    font-family: 'Maven Pro', sans-serif;
    font-family: 'Playfair Display SC', serif;  
}

.left-side-header {
    width: auto;;
    float: left:
}

.right-side-header {        
    width: auto;
    float: right;
}

.navmenu {
  border: 1px solid #dedede;
  color: black;
  overflow: hidden;
  width: 100%;
  font-family: 'Carrois Gothic', sans-serif;
  display: inline; 
}

.navmenu A:link {text-decoration: none; color: black;}
.navmenu A:visited {text-decoration: none; color: black;}
.navmenu A:active {text-decoration: none; color: black;}
.navmenu A:hover {text-decoration: none; color: #66CCFF;}

.navmenu li:before {
    content: "+";   
    text-indent: -1em;  
}

.navmenu a {
    width:150px;
}

.navmenu ul {
 list-style: none;
 list-style-type: none;
}

截图：

enter image description here

我如何解决这个问题，更重要的是，为什么会发生这种情况？

Answer 1

您有一些选择，但最简单的是：display: inline-block另一个可以是display: block，您可以float: left

然后你甚至可以使用table-cell和flex

来深入研究

Answer 2

你有这个

.navmenu {
  display: inline;

}

您需要定位列表项

.navmenu li {
  display: inline; /* I prefer inline-block though */

}

水平导航菜单

2 个答案: