HTML UI元素不正確中心

還是很新的HTML和這樣所以道歉，如果這是一個很簡單的問題...HTML UI元素不正確中心

我有格式化的問題，我已經試過爲中心的導航元素我的文件，但他們似乎並沒有這麼做。

這裏是在瀏覽器中的問題的圖像 - http://i.imgur.com/A6630.png

這裏是我的HTML。（有一些蛋糕Ipsum在那裏開機）

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>About Me Example Page:</title> 
    <link href="../css/aboutcss.css" type="text/css" rel="stylesheet" />   
</head> 

    <body> 

     <div id="wrapper"> 

      <h1><img src="../images/about/aboutlogo.png" alt="About Me" style="height:100px;"></h1> 

      <nav> 

       <ul> 
       <hr align="center"/> 
        <li><a href="../index.html">Home</a></li> 
        <li><a href="../portfolio/index.html">Portfolio</a></li> 
        <li><a href="../contact/index.html">Contact</a></li> 
        <li><a href="../blog/index.html">Blog</a></li> 
       <hr /> 
       </ul> 

      </nav> 

      <img src="../images/about/aboutmephoto.jpg" id="me"> 

      <p>Hello there!</p> 

      <p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p> 

      <p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p> 

       <hr align="center" width="50%" /> 

      <p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p> 

      <p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p>   

      <footer> 
      &copy; Me 2012 
      </footer> 

     </div> 

     </body> 
</html>

而且對於同一頁面的CSS：

body { 
background-color: #3D3D3D; 
    } 

    p, a, footer { 
font-family: 'Open Sans', Sans Serif; 
    } 

    h1 * { 
height: 125px; 
display: block; 
margin: 0 auto; 
} 

    p { 
color:#E2E2E2; 
font-size: 13px; 
margin-left: auto; 
margin-right: auto; 
padding-left: 10px; 
padding-right: 10px; 
} 

    footer { 
font-size: 9px; 
padding-bottom: 8px; 
text-align: center; 
color:#E2E2E2; 
} 

    nav { 
text-align:center; 
} 

    nav li { 
display: inline; 
    } 

    nav a { 
display: inline-block; 
text-decoration: none; 
color: #E2E2E2; 
font-size: 17px; 
font-variant: small-caps; 
font-weight: bold; 
padding:0; 
margin-left: 3em; 
margin-right: 3em; 
} 

    a:visited { 
color:#E2E2E2; 
} 

    #wrapper { 
max-width: 1200px; 
width: 90%; 
background-color: #1A1A1A; 
margin-left: auto; 
margin-right: auto; 
border-style: solid; 
border-width: 2px; 
border-color: black; 
    } 

    #me { 
margin: 25px; 
border-style: solid; 
border-width: 5px; 
border-color: #656565; 
height:300px; 
float:right; 
}

在此先感謝您的幫助！

來源

2012-12-11 BML91

避免的，你可以把「邊界」，以「UL」。 – alditis

刪除：hr的ul。

並提出：

nav ul { 
    border-width: 2px 0px 2px 0px ; 
    border-style: solid ; 
    border-color: #FFFFFF; 
    padding: 5px 0px 5px 0px; 
}

問候。

來源

2012-12-11 03:41:48 alditis

已經這樣做了，也調整了一點厚度...有沒有反正使邊界不擴展整個div的跨度？比如說說它的75％？編輯：Nevermind用填充對它進行排序，現在我試圖找出如何將邊框從列表元素的頂部和底部推開。 – BML91

put padding：5px 0px 5px 0px; – alditis

我編輯了我的答案 – alditis

添加margin-right：40px;你的尺寸

來源

2012-12-11 03:40:30

這似乎把它排除在外，我也刪除了hr元素，以支持邊界選項。 – BML91

僅供將來參考，這是怎麼回事？爲什麼我需要這樣做，它不應該默認做到這一點嗎？（顯然不是多少......） – BML91

UL是一個塊元素，它佔用了它的容器的整個寬度。它也有一個默認的左邊距。這就是爲什麼你的HR一路走過屏幕，但左邊有空間。邊界右移將UL從UL容器的右側邊緣推出與UL的左邊填充相同的量。填充權應該做同樣的事情。 –

從UL標籤取出HR標籤 - 如果您仍然傾向於使用它 - 。是的，邊界（頂部和底部，堅實的，灰色的，1px的將做到這一點）

<hr> 
       <ul> 

        <li><a href="../index.html">Home</a></li> 
        <li><a href="../portfolio/index.html">Portfolio</a></li> 
        <li><a href="../contact/index.html">Contact</a></li> 
        <li><a href="../blog/index.html">Blog</a></li> 

       </ul><hr />

在CSS使用小時

nav { 
text-align:center; 
padding-left:50px; 
padding-right:50px; 
}

來源

2012-12-11 03:46:12 Natalia

HTML UI元素不正確中心

回答

相關問題