填充在我的 <ul> 上创建了奇怪的黑线

Question

当我拉伸 CSS 中的背景时，填充创建了一条奇怪的黑线，我添加的填充越多，黑线就越大，这里是图像：

http://i61.tinypic.com/2ia7rlv.jpg

代码如下：

CSS:

/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 vertical-align: baseline;
}

/* end of browser styles */

@import url(http://fonts.googleapis.com/earlyaccess/notosanshebrew.css);

#logo {
 padding-right: 10px;
 padding-top: 10px;
}

nav {
 background: rgba(0,0,0,.7);
 padding: 2px;}
nav li {
 display: inline;
 padding: 0 20px;
}
nav ul {
 list-style-type: none;
}
nav ul a{
 text-decoration: none;
 color: white;
}

nav a:hover {
 color: rgb(207, 207, 207);
}

<!doctype html>
<html dir="rtl" lang="he-IL" prefix="og: http://ogp.me/ns#">
 <head>
  <meta charset="utf-8">
  <title>SD עיצובים</title>
  <link href="css/style.css" rel="stylesheet">
 </head>
 <body>
  <div id="wrapper">
   <header div="mainHeader">
    <nav div="mainNav">
     <ul>
      <img id="logo" src="images/title5.png"/>
      <li><a href="index.html">דף הבית</a></li>
      <li><a href="about.html">אודות</a></li>
      <li><a href="jewelery.html">תכשיטים</a></li>
      <li><a href="contact.html">צור קשר</a></li>
     <ul>
    <nav>
   <header>
  </div>
 </body>
</html>

Answer 1

您的代码中有错字。不是用 </nav> 关闭 <nav>，而是在 <ul> 元素下打开一个新的。

Answer 2

您的 ul、nav 和 header 元素中缺少结束标记。浏览器将其视为您正在创建新元素。

正确代码：

<div id="wrapper">
            <header div="mainHeader">
                <nav div="mainNav">
                    <ul>
                        <img id="logo" src="images/title5.png"/>
                        <li><a href="index.html">דף הבית</a></li>
                        <li><a href="about.html">אודות</a></li>
                        <li><a href="jewelery.html">תכשיטים</a></li>
                        <li><a href="contact.html">צור קשר</a></li>
                    </ul>
                </nav>
            </header>
        </div>

工作解决方案：

http://jsfiddle.net/xL5c4t6y/

填充在我的 <ul> 上创建了奇怪的黑线

Padding creates weird black line on my <ul>

html

css

menu

list

html-lists