[英]HTML and CSS <li> alignment in CSS
so I am working on a project that is almost done, but I am trying to fix a problem that I have been having with <li>
. 所以我正在一个几乎完成的项目上工作,但是我正在尝试解决
<li>
遇到的问题。 I have a <ol><li>
for my aside, and I have a <ul>
of some text (I only need a few bullet points). 我旁边有一个
<ol><li>
,还有一些文本的<ul>
(我只需要几个要点)。 There is a constraint that ALL CSS must be external, which is the reason I don't know how to fix it. 所有CSS必须在外部存在一个约束,这就是我不知道如何解决它的原因。
The first Picture shows the entire page. 第一张图片显示了整个页面。 http://i.imgur.com/wGLPYNg.png The last picture shows the that I am trying to move up and and align vertically without messing up the alignment of the text in the aside http://i.imgur.com/XsyMDgW.png
http://i.imgur.com/wGLPYNg.png最后一张图片显示的是我试图向上移动并垂直对齐,而不会弄乱旁边的文本对齐方式http://i.imgur.com/ XsyMDgW.png
Any help is greatly appreciated, and if more information is needed, I am happy to send more. 非常感谢您的帮助,如果需要更多信息,我很乐意发送更多信息。 Thanks in advance!!
提前致谢!!
/* Assignment notes -Contains <main> element and is styled with at least 2 declarations -Contains <header> element and is styled with at least 2 declarations -Contains <nav> element and is styled with at least 2 declarations -Contains <footer> element and is styled with at least 2 declarations -Has a <meta> viewport -Font Family is declared in Body selector -Font Size is declared in Body Selector -Color properties and values are declared in Body selector -Padding and Margin are declared in <img> -Boarder Properties are declared in Content ID -Links are formated using Pseudo Seletors -Text Declaration is used to show Links -All CSS is external -Checked in Validator */ body { background: #98bfcd; border: 5px outset #fff; width: 900px; margin: 0 auto; } ol { list-style-type: none; margin: 10px; padding: 0; overflow: hidden; background-color: #00c; width: 461px; } aside { text-align: center; height: 500px; } li { float: left; } h1 { text-align: center; padding-top: 30px; padding-left: 30px; font-family: arial; } img{ float: right; } h2 { text-decoration: underline; font-family: Arial; } li a{ display: block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; } footer{ float: center; font-family: arial; font-size: 2px; } /* Change the link color to #111 (black) on hover */ li a:hover { background-color: #111; } #content { }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bruesch- LP3 Advanced Home Page</title> <link href="HomeStyle.css" rel="stylesheet" type="text/css"> <meta content="width=device-width, initial-scale=1" name="viewport"> </head> <!-- Assignment notes -Contains <main> element and is styled with at least 2 declarations -Contains <header> element and is styled with at least 2 declarations -Contains <nav> element and is styled with at least 2 declarations -Contains <footer> element and is styled with at least 2 declarations -Has a <meta> viewport -Font Family is declared in Body selector -Font Size is declared in Body Selector -Color properties and values are declared in Body selector -Padding and Margin are declared in <img> -Boarder Properties are declared in Content ID -Links are formated using Pseudo Seletors -Text Declaration is used to show Links -All CSS is external -Checked in Validator --> <body> <header> <h1>Test</h1><img alt="Crane Lifting HTML Text" height="302" src= "html5.jpg" width="400"> </header> <div id="page-wrap"> <aside> <nav> <ol> <li> <p><a href="#">Home</a></p> </li> <li> <p><a href="#" target="_blank">Webography</a></p> </li> <li> <p><a href="#" target="_blank">Resume</a></p> </li> <li> <p><a href="#" target="_blank">XML Demo</a></p> </li> <li> <p><a href="#" target="_blank">Contact</a></p> </li> </ol> </nav> </aside> </div> <h2>The Perks of HTML and CSS</h2> <ul> <li>asd</li> <li>asd</li> <li>asd</li> </ul> <footer><a href="#top">Go to top</a></footer> </body> </html>
In the CSS, You have made a small mistake for the properties of <li>
element This is what you have given 在CSS中,您为
<li>
元素的属性犯了一个小错误,这就是您所给出的
li{
float: left;
}
This is changing your menu perfectly. 这完美地改变了您的菜单。 But it is also effecting the list elements in the bottom.
但这也会影响底部的列表元素。 You can consider giving like below.
您可以考虑如下所示。
li a{
float: left;
}
Change the HTML to: 将HTML更改为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bruesch- LP3 Advanced Home Page</title>
<link href="HomeStyle.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<!-- Assignment notes
-Contains <main> element and is styled with at least 2 declarations
-Contains <header> element and is styled with at least 2 declarations
-Contains <nav> element and is styled with at least 2 declarations
-Contains <footer> element and is styled with at least 2 declarations
-Has a <meta> viewport
-Font Family is declared in Body selector
-Font Size is declared in Body Selector
-Color properties and values are declared in Body selector
-Padding and Margin are declared in <img>
-Boarder Properties are declared in Content ID
-Links are formated using Pseudo Seletors
-Text Declaration is used to show Links
-All CSS is external
-Checked in Validator -->
<body>
<header>
<h1>Test</h1><img alt="Crane Lifting HTML Text" height="302" src=
"html5.jpg" width="400">
</header>
<div id="page-wrap">
<aside>
<nav>
<ol>
<li>
<p><a href="#">Home</a></p>
</li>
<li>
<p><a href="#" target="_blank">Webography</a></p>
</li>
<li>
<p><a href="#" target="_blank">Resume</a></p>
</li>
<li>
<p><a href="#" target="_blank">XML Demo</a></p>
</li>
<li>
<p><a href="#" target="_blank">Contact</a></p>
</li>
</ol>
</nav>
<h2>The Perks of HTML and CSS</h2>
<ul>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
</aside>
</div>
<footer><a href="#top">Go to top</a></footer>
</body>
</html>
And the style to: 和样式为:
/* Assignment notes
-Contains <main> element and is styled with at least 2 declarations
-Contains <header> element and is styled with at least 2 declarations
-Contains <nav> element and is styled with at least 2 declarations
-Contains <footer> element and is styled with at least 2 declarations
-Has a <meta> viewport
-Font Family is declared in Body selector
-Font Size is declared in Body Selector
-Color properties and values are declared in Body selector
-Padding and Margin are declared in <img>
-Boarder Properties are declared in Content ID
-Links are formated using Pseudo Seletors
-Text Declaration is used to show Links
-All CSS is external
-Checked in Validator
*/
body {
background: #98bfcd;
border: 5px outset #fff;
width: 900px;
margin: 0 auto;
}
ol {
list-style-type: none;
margin: 10px;
padding: 0;
overflow: hidden;
background-color: #00c;
width: 461px;
}
aside {
text-align: center;
height: 500px;
}
nav li {
float: left;
text-align: left;
}
li{
text-align: left;
}
h1 {
text-align: center;
padding-top: 30px;
padding-left: 30px;
font-family: arial;
}
img{
float: right;
}
h2 {
text-decoration: underline;
font-family: Arial;
}
li a{
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
footer{
float: center;
font-family: arial;
font-size: 2px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
#content {
}
</style>
If i understand your question correctly, 如果我正确理解您的问题,
To make <ul>
(the one right under "The Perks Of HTML") to be vertical, you need to change css that 为了使
<ul>
(“ HTML的特权”下面的一个)垂直,您需要更改css
li {float: left;}
to 至
aside li {float: left;}
JSfiddle - https://jsfiddle.net/dhananjaymane11/k4L74rp9/2/ JSfiddle- https: //jsfiddle.net/dhananjaymane11/k4L74rp9/2/
I believe that adding a line break to each element of the list would work, like: 我相信在列表的每个元素上添加一个换行符会起作用,例如:
<h2>The Perks of HTML and CSS</h2> <ul> <li>asd</li><br> <li>asd</li><br> <li>asd</li><br> </ul>
would work in creating a vertical alignment 将有助于创建垂直对齐
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.