Html 列表菜单元素将它们并排放置_Html_Css_Html Lists_Nav

Html 列表菜单元素将它们并排放置

html css

Html 列表菜单元素将它们并排放置,html,css,html-lists,nav,Html,Css,Html Lists,Nav,我试图让无序的列表元素在导航菜单栏上并排排列问题：我已将显示设置为“内联”，但这似乎没有任何区别导航条（.css中的nav）没有占用100%的宽度空间，我尝试通过提供100%的宽度来解决这个问题，但是导航条的两侧都有间隙最后，当窗口进入全屏时，导航条（.nav）的位置会因背景图像的扩展而改变，有没有办法在窗口变大时阻止背景的扩展，从而不会对导航条的定位产生影响下面是我的尝试，有人能发现我哪里出了问题吗？非常感谢 HTML: 图像问题3：这是当窗口不是全屏幕时，这正是我希望导航条定位的

我试图让无序的列表元素在导航菜单栏上并排排列

问题：

我已将显示设置为“内联”，但这似乎没有任何区别

导航条（.css中的nav）没有占用100%的宽度空间，我尝试通过提供100%的宽度来解决这个问题，但是导航条的两侧都有间隙

最后，当窗口进入全屏时，导航条（.nav）的位置会因背景图像的扩展而改变，有没有办法在窗口变大时阻止背景的扩展，从而不会对导航条的定位产生影响

下面是我的尝试，有人能发现我哪里出了问题吗？非常感谢

HTML:

图像问题3：这是当窗口不是全屏幕时，这正是我希望导航条定位的方式

下面是当它是全屏幕的时候，你可以看到背景图像已经展开，现在导航栏的位置比我希望它在第一张图像中的位置高很多。

第一项：

添加

显示：内联到.nav菜单li
而不是.nav菜单


h1
（以及其他标题标记）默认为块
元素。要将其显示在与菜单相同的行中，请添加display:inline块至徽标

第二项：
默认情况下，正文
有边距。因此，要使nav
栏占据整个空间，必须将body{margin:0；}
添加到CSS中
第三项：
添加位置：绝对位置；底部：0px到.nav
类。这将把酒吧放在底部

涵盖上述所有三项。
尝试将显示：内联添加到.nav menu li
而不是.nav menu
@Harry这太完美了。。但现在，它们都出现在这里的标识下方（请参阅图片）。最好将它放在它旁边的同一行h1
元素在默认情况下是块
元素。因此，您必须添加display:inline块至.logo
。看看这个。在这个例子中，我避免了另一个很好的效果。如果你所有的问题都解决了，我会把它们合并成一个单一的答案。@Harry，太完美了！就第一个问题而言，这正是我想要达到的目标。一个问题，如何在每个列表元素之间获得一些空间？填充或边距不起作用trick@Harry哦，nvm，我已经修好了。。边距应该放在导航里，我只是把它放在导航里，哈哈哈谢谢你，哈利，这解决了我的前两个问题。Fiddler在解释第三个问题时不是很好，因此我在问题中添加了一些图片来说明我的问题。请看一看。有任何问题，请告诉我。@Umz15:我现在明白了。尝试添加位置：绝对；底部：0px到.nav类。这应该可以解决问题。伙计，非常感谢你。你解决了我所有的问题。我已经坚持了好几天了。非常感谢你的时间。有什么能让我进一步受益的建议或网站吗？很高兴认识你，伙计。我现在也在用这个项目更新答案。我推荐的最好的网站是Google，然后是StackOverflow（当然）。有很多信息，但是在检查后决定是否使用它。事实上，我现在仍然如此；）
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="nav">
        <h1 class="logo">LogoHere</h1>
            <ul class="nav-menu">
                <li>Action</li>
                <li>Who we are?</li>
                <li>Blog</li>
                <li>Services</li>
                <li>Get in touch</li>
            </ul>
    </div>
</body>
</html>

.nav{
    background-color: #2EC0FE;
    opacity: 0.75;
    -moz-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
    background-image: -o-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
    height: 100px;
    width: 100%;
    margin-top: 600px;
}

.logo{
    font-family: times, Times New Roman, times-roman, georgia, serif;
    font-size: 54px;
    line-height: 40px;
    letter-spacing: -5px;
    color: white;
    margin: 0 0 0 0;
    padding-top: 25px;
    padding-left: 25px;
    font-weight: 100;
}

.nav-menu 
{
  list-style-type: none;
  display: inline;
  text-align: center;
  font-size: 20px;
  color: white;
  padding: 0px;
  margin-top: 0px;
}