Question

自从我开始尝试做这项工作已经两天了，我发誓我看不出我做错了什么。这是我的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

* { margin:0; padding:0; }

div#header {
position:fixed;
outline: none;
text-align:center;
font-family:'Arvo', serif;
color:white;
font-size:48px;
height:5%;
width:100%;
background-color: rgba(0,79,113,1);
}

div#sidebar {
position:relative;
bottom
font-family:'Arvo', serif;
list-style-type: square;
list-style-position: inside;
color:white;
height:100%;
width:5%;
background-color: rgba(100,147,167,1);
}

li{
font-family:'Arvo', serif;
}

我是一个完整的CSS菜鸟（我的代码可能很糟糕）我希望标题栏下方的侧边栏，侧边栏中间的文字与右侧对齐。有人可以帮忙吗？

jsfiddle：https://jsfiddle.net/k5ffLzoe/

Answer 1

试试这个：http://codepen.io/mattpark22/pen/xVxxWe

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

HTML：

＆＃13;

* { margin:0; padding:0; }

div#header {
outline: none;
text-align:center;
font-family:'Arvo', serif;
color:white;
font-size:48px;
height:5%;
width:100%;
background-color: rgba(0,79,113,1);
}

div#sidebar {
float: right;
text-align: center;
font-family:'Arvo', serif;
list-style-type: square;
list-style-position: inside;
color:white;
height:100%;
width:5%;
background-color: rgba(100,147,167,1);
}

li{
font-family:'Arvo', serif;
}

＆＃13;

<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>
  </div>
</body>

＆＃13;

Answer 2

我已经添加了以下css，以便为您提供更接近您所寻找的内容

 /**ADDED**/
 div#header {
   height: 10%;
 }
 div#sidebar {
   width: 10%;
   position: relative;
   top: 55px;
 }
 ul {
   width: 50px;
 }

您可以在此处查看结果：https://jsfiddle.net/ec5p7pxq/

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

在标题下移动侧栏

2 个答案: