如何仅将导航栏移动到右侧？为什么我不能改变文字的字体？ [英] How do I move just the navigation bar to the right hand side? Why can't I change the font of the text?
问题描述
我有两个问题：如何只将导航栏移到右边？
如何将所有链接移动到右边但保留标题在左边。标题意思是草地世界体育新闻。每次我使用浮动，它会移动整个想法，包括标题。
第二个问题：
每次我尝试更改草地世界体育新闻的标题字体时，字体都不会改变。字体根本没有变化：整个字体：15px;被忽略。
我如何解决这个问题？
我尝试过：
第一个问题：
I have two questions: How do I move just the navigation bar to the right?
How do I move all the links to the right but keep the title on the left. The title meaning 'Grass World Sport News'. Every time I use float, it moves the whole think including the title.
2nd Question:
Every time I try to change the font for the title which is Grass World Sport News, the font doesn't change. The font doesn't change at all: the whole font: 15px; is ignored.
How do i fix this?
What I have tried:
1st Question:
Here is my html:
<pre><DOCTYPE html>
<head>
<title> GWS News</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header>
<div class="container">
<h1> Grass World Sport News</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">World Cup</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="banner">
<img class="banner-image" src=img/banner1.jpeg>
</div>
</header>
</body>
Here is my css:
html,body{
background-color: #5f5f5f;
margin: 0;
padding: 0;
font-family: sans-serif;
}
div.container{
max-width: 1200px;
margin: 0;
padding: 0 30px;
}
header{
background-color: #000000;
float: left;
width: 100%;
}
header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
}
header ul{
list-style-type: none;
padding: 0;
margin: 22px 0 0 0;
float: right;
}
header ul li{
display: inline-block;
text-decoration: underline;
}
header li a:hover{
color: #D3D3D3
}
header ul li a{
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
padding: 10px;
display: block;
}
.banner-image {
width: 100%;
}
第二个问题;
这是相同的编码，但侧重于css的这一部分：
标题h1 {
颜色：#ffffff;
text-transform：大写;
float：left;
字体：10px;
}
当我打开网站并检查chrome上的元素时：通过css的'font'部分有一条线。
为什么我可以不要大或小？
2nd Question;
It is the same coding but focusing on this part of the css:
header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
font: 10px;
}
When I open up the website and inspect element on chrome: there is a line through the 'font' part of the css.
Why is it that I can't make it bigger or smaller?
推荐答案
1。我可以建议使用Bootstrap。以下是一个示例： CP_menu_bootstrap - JSFiddle [ ^ ]
2.语法应为font-size
3.坚持使用当前设计： [ CP_menu_orig ]
1. Can I suggest to use Bootstrap. Here is an example: CP_menu_bootstrap - JSFiddle[^]
2. the syntax should be font-size
3. To stick with current design: [CP_menu_orig]
这篇关于如何仅将导航栏移动到右侧？为什么我不能改变文字的字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
