堆栈内存溢出
  繁体   English   中英

HTML和CSS <li> CSS中的对齐

[英]HTML and CSS <li> alignment in CSS

 原文  2016-06-15 04:19:13  2   4    html/ css/ css3/ html-lists

问题描述

所以我正在一个几乎完成的项目上工作，但是我正在尝试解决<li>遇到的问题。 我旁边有一个<ol><li> ，还有一些文本的<ul> （我只需要几个要点）。 所有CSS必须在外部存在一个约束，这就是我不知道如何解决它的原因。

第一张图片显示了整个页面。 http://i.imgur.com/wGLPYNg.png最后一张图片显示的是我试图向上移动并垂直对齐，而不会弄乱旁边的文本对齐方式http://i.imgur.com/ XsyMDgW.png

非常感谢您的帮助，如果需要更多信息，我很乐意发送更多信息。 提前致谢！！ 

 /* 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>

4 个解决方案

解决方案1
 0 已采纳  2016-06-15 04:29:55

在CSS中，您为<li>元素的属性犯了一个小错误，这就是您所给出的 

li{
float: left;
}

这完美地改变了您的菜单。 但这也会影响底部的列表元素。 您可以考虑如下所示。 

li a{
float: left;
}

解决方案2
 0  2016-06-15 04:41:08

将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>

和样式为： 

/* 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>

解决方案3
 0  2016-06-15 04:48:00

如果我正确理解您的问题，

为了使<ul> （“ HTML的特权”下面的一个）垂直，您需要更改css 

li {float: left;}

至 

aside li {float: left;}

JSfiddle- https: //jsfiddle.net/dhananjaymane11/k4L74rp9/2/

解决方案4
 -2  2016-06-15 04:36:33

我相信在列表的每个元素上添加一个换行符会起作用，例如： 

 <h2>The Perks of HTML and CSS</h2> <ul> <li>asd</li><br> <li>asd</li><br> <li>asd</li><br> </ul>

将有助于创建垂直对齐

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 html css-li的文本对齐 的CSS <ul><li> ：项目对齐 HTML和CSS对齐问题 html css对齐 html/css 中的对齐修复 修复了 HTML/CSS 中的 Alignment HTML / CSS div对齐 HTML CSS图像对齐 HTML，CSS徽标对齐 html/css 中按钮的 Alignment
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM