堆棧內存溢出
  簡體   English   中英

HTML和CSS <li> CSS中的對齊

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

 原文  2016-06-15 04:19:13  7   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