Question

我正在尝试在我的网站顶部创建一个导航栏，我的徽标会出现，但是＆＃34; home＆＃34;当我试图向左浮动时没有。我究竟做错了什么？

当我将网站设置为尽可能小时，它会显示在徽标的左侧，但我希望它位于右侧。

An  interactive  shell  is  one  started without non-option arguments and without the -c option whose standard input and
       error are both connected to terminals (as determined by isatty(3)), or one started with the -i option.  PS1 is  set  and
       $- includes i if bash is interactive, allowing a shell script or a startup file to test this state.

Answer 1

此HTML有几个问题

首先你在头部和身体标签之间有样式标签，它应该放在头部标签内 - 这可能会导致奇怪的行为或根据浏览器不起作用
您正在使用-28px的边距，这有效地将内部div移动到外部div之上，从而使其不可见（因为它位于可见页面上方）。
font-color应为彩色

Answer 2

以下是您的代码，其中包含一些修改内容：

<body>
    <div id="topBar">
        <img id="logo" class="menu-item logo-item" src="backflip-logo.png"><!-- Updated the class -->
        <div class="menu-item">HOME</div><!-- Updated the tag placement to fall within top bar -->
    </div>
</body>

还编辑了一下你的CSS：

#topBar{
background-color: #242424;
height: 63px;
}

#logo{
height: 40px;

}
.logo-item{
float: left;
margin-left: 90px;
}
.menu-item{
padding-top: 10px;
float: left;
font-size: 110%
margin-right: 20px;
color: #ffffff;
}
.topBarItems{

}

但是，您可能只想使用Bootstrap这样的框架：http://getbootstrap.com

，而不是从头做任何事情。

这是一个小提琴：https://jsfiddle.net/windrunn3r1990/fck4zsue/

Answer 3

您可以使用display:inline-block;而不是浮动组件来解决您的问题。 https://jsfiddle.net/oxycm856/

<强> HTML

<body> 
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div> 
</div>
</body>

<强> CSS

#topBar{
  width:100%;
  background-color:#242424;
  height: 63px;
}

#logo-item, .menu-item{
  display:inline-block;
  color:#fff;
}

HTML Div未出现在导航栏中

3 个答案: