Question

<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<style> 
.topnav {
  background-color: #333;
  overflow: hidden;
  position: fixed;
}
.topnav1 {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  width: 100%;
  height: auto;
}
.topnav1:hover {
  background-color: #ddd;
  color: black;
}
.topnav1.active {
  background-color: #4CAF50;
  color: white;
}
.homebutton {
  width: 5%;
  height: auto;
  border: solid;
  border-color: white float: left;
  align: center;
}
</style>
</head>
<body>
<div class="topnav topnav1">
        <a href="/" class="topnav topnav1"><img src="imagesource" class="homebutton"></img>
        </a>
        <a href="/about" class="topnav topnav1">About</a>
        <a href="/updates" class="topnav topnav1">Updates</a>
        <a href="/contact" class="topnav topnav1">Contact</a>
    </div>
</body>
</html>

我正在设计一个带有主页按钮照片的导航栏，但是我想要设计的栏是水平的并固定在页面顶部。然而，它始终呈现为垂直并居中于页面顶部。如何解决这个问题。

Answer 1

请按照以下显示结构。你真的需要在你的CSS上做很多事情。无论您在哪里学习，还要检查这些属性及其当前支持的浏览器。

＆＃13;

.topnav {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.topnav1 {
  float: left;
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  height: auto;
}

.topnav1:hover {
  background-color: #ddd;
  color: black;
}

.topnav1.active {
  background-color: #4CAF50;
  color: white;
}

.homebutton {
  width: 5%;
  height: auto;
  border: solid;
  border-color: white float: left;
  text-align: center;
  /* Align:center is obsolete now */
}

＆＃13;

<div class="topnav">
  <a href="/" class="topnav1"><img src="imagesource" class="homebutton">
  </a>
  <a href="/about" class="topnav1">About</a>
  <a href="/updates" class="topnav1">Updates</a>
  <a href="/contact" class="topnav1">Contact</a>
</div>

＆＃13;

水平导航栏即将成为垂直

1 个答案: