Question

我是html和css的新手，我正在尝试为我的网站获取徽标，导航显示在彼此旁边，而不是在下面。我只是无法弄清楚出了什么问题。

我已经列出了我的html，后面是我的css。我的css是它自己的文件，我无法弄清楚如何在这里分开它们。

<!--Header-->
        <header>    
            <a href="#">
                <img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
            </a>
            <!--Primary navigation-->
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>


header a img {
  margin-top: 10px; 
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 10px;
  display: inline;}

nav {
display: inline;
float: right;}

nav ul  {
list-style: none;
display: inline;}

 nav ul li {
 display: inline-block;
 text-decoration: none;
 font-size: 90%;
 font-weight: bold;
 color: #069;
padding: 4px 3px;}

nav li a {
display: inline-block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #069;}

以下是我的网页外观的截图，您可以看到导航位于徽标下方，我试图将其显示在与徽标相同的行的右侧。 http://postimg.org/image/rjqjmrog1/

我用jsfiddle解决了这个问题， https://jsfiddle.net/2fwvzb7s/1/ 在正确加载，但是当我在chrome中打开我的页面时加载错误，所以我很困惑。

Answer 1

它运作良好，请您详细说明问题。

＆＃13;

 header a{float:left; display:inline-block}
header a img {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 10px;
  display: inline;
  height:45px;
}
nav {
  display: inline;
  float: right;
}
nav ul {
  list-style: none;
  display: inline;
}
nav ul li {
  display: inline-block;
  text-decoration: none;
  font-size: 90%;
  font-weight: bold;
  color: #069;
  padding: 4px 3px;
}
nav li a {
  display: inline-block;
  padding: 4px 3px;
  text-decoration: none;
  font-size: 90%;
  font-weight: bold;
  color: #069;
}

＆＃13;

<!--Header-->
<header>
  <a href="#">
    <img src="https://step.wiwi.uni-kl.de/fileadmin/wd2013/fb-logo/fb_logo_dummy.png" alt="Lost Collector" title="Lost Collector" />
  </a>
  <!--Primary navigation-->
  <nav>
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">About Us</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</header>

＆＃13;

在标题内获得排队徽标和导航

1 个答案: