Fatal编程技术网
  • css/
  • Css 移动标题下的侧栏

Css 移动标题下的侧栏

css

Css 移动标题下的侧栏,css,Css,我已经两天没试着让这一切顺利了，我发誓我看不出我做错了什么。 这是我的HTML <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo"> <link rel="stylesheet" type="text/css" href="../css/main.css"> <meta charset="

我已经两天没试着让这一切顺利了，我发誓我看不出我做错了什么。 这是我的HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<body>
<div id="header">
Home
</div>
<div id="sidebar">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</body>

我是一个完整的CSS NoOB（我的代码可能很糟糕），我想把工具栏放在标题栏下面，边栏中间的文本向右对齐。有人能帮忙吗

jsiddle:

试试这个：

我已经修复了一个丢失的结束标记，并为您更新了CSS

HTML:

*{margin:0；padding:0；}
div#头{
大纲：无；
文本对齐：居中；
字体系列：'Arvo'，衬线；
颜色：白色；
字体大小：48px；
身高：5%；
宽度：100%；
背景色：rgba（0,79113,1）；
}
div#侧边栏{
浮动：对；
文本对齐：居中；
字体系列：'Arvo'，衬线；
列表样式类型：方形；
列表样式位置：内部；
颜色：白色；
身高：100%；
宽度：5%；
背景色：rgba（100147167,1）；
}
李{
字体系列：'Arvo'，衬线；
}

主页
家

    

  • 试验
    • 

  • 试验
    • 

  • 试验
    •
我添加了以下css，为您提供可能更接近您所需的内容

 /**ADDED**/
 div#header {
   height: 10%;
 }
 div#sidebar {
   width: 10%;
   position: relative;
   top: 55px;
 }
 ul {
   width: 50px;
 }
您可以在此处看到结果：

好的做法是在css中使用class而不是id

你能添加你想要的图片吗？在你的
结束后，你错过了一个结尾，你想完成什么？谢谢你，我刚开始使用css，你帮了我很多忙！唯一的问题是，现在边栏没有屏幕那么长，即使我将高度设置为100%，如果您只支持IE10+，那么您可以查看CSS3 Flexbox以获得高度，这里可以找到一个例子：不过Flexbox在IE9和IE8中不起作用。我现在并不特别关心兼容性，因为这只是为了学校，我只是从网页编码开始，所以我要使用它，谢谢！ 
 /**ADDED**/
 div#header {
   height: 10%;
 }
 div#sidebar {
   width: 10%;
   position: relative;
   top: 55px;
 }
 ul {
   width: 50px;
 }