Navbar品牌在左侧。右侧的导航栏

时间:2018-11-22 01:05:04

标签: html css navbar branding

我尝试将导航栏品牌定位在左侧,以更改字体和大小,并且应该是可单击的文本,并在右侧进行导航。我试图添加一个div或class ID,但无法正常工作。

我尝试将其放在li中,但我不知道这是否有所不同,因为我需要对正确的导航栏进行分类,以便我可以主动对其进行样式设置。

html {
    max-width: 1024px;
	min-width: 320px;
}

body {
	max-width: 1024px;
	min-width: 320px;
	margin-left: auto;
	margin-right: auto;
	font-family: arial;
}


/*Navbar*/



/* Add a black background color to the top navigation */

.logo {
	padding-top: 10px;
}


.topnav {
	padding-top: 10px;
    padding-bottom: 10px;
}


/* Style the links inside the navigation bar */
.topnav a {
	font-family: 'Roboto Condensed', sans-serif;
	list-style-type: none;
	text-align: center;
	display: inline;
    font-size: 17px;
	text-decoration: none;
	color: #1d1d1d;
	padding: 10px;

}

/* Change the color of links on hover */
.topnav a:hover {
  color: red;
}

/* Add a color to the active/current link */
.topnav a.active {
  color: red;
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

/*Navbar end*/
	<body>
	<!--Header-->
	<header>
		<!--Logo-->
		<div class="topnav">
		  <div class="topnav-right">
		  	<a href="selectTopic?html" class="topic">HTML 5</a>
		  	<a class="active" href="#home">Home</a>
		  	<a href="#search">Blog</a>
			<a href="#search">About</a>
		    <a href="#search">FAQ</a>
		    <a href="#about">Contact</a>
			</div>
		  </div>
		  </div>
	</header>

0 个答案:

没有答案