我是 HTML/CSS 的新手，现在我正在努力学习教程，我想知道 #menubar ul 中的 em width: 2em 指的是什么？
在父容器中，没有它可以引用的宽度？或者我在这里弄错了。
<body>
<section id="menubar">
<ul>
<li><a class="menubutton" href="#menu"> <img src="images/menu.png"> </a></li>
</ul>
</section>
<header>
<h1>HMTLworldBLOG</h1>
</header>
<nav class="nav">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="index.html">Tutorials</a></li>
<li><a href="index.html">Videos</a></li>
<li><a href="index.html">Community</a></li>
<li><a href="index.html">About</a></li>
</ul>
</nav>
<section id="main">
<article>
<h2>Das ist ein Artikel</h2>
<img src="images/bild.jpg">
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</article>
<aside>
<section>
<h2>Weitere Artikel</h2>
<ul>
<li>Noch einer</li>
<li>Noch einer</li>
<li>Noch einer</li>
</ul>
</section>
<section>
<h2>Ein Textfeld</h2>
<p>Lorem ipsum.</p>
</section>
<section>
<h2>Kategorien</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>jquery</li>
<li>Tool</li>
</ul>
</section>
</aside>
</section>
<footer>
<ul>
<li>Kontakt</li>
<li>Datenschutz</li>
<li>Impressum</li>
</ul>
</footer>
</body>
和 CSS:
body {
background: #DCDCDC;
font-size: 100%;
margin: 0em;
padding: 0em;
}
h1 {
font-size: 2.5em;
line-height: 3.8em;
font-family: Helvetica;
font-weight: 100;
color: #E2DBDB;
margin: 0em;
}
h2 {
font-size: 1.563em;
line-height: 1.8em;
font-family: Helvetica;
font-weight: 100;
color: #2F2D2C;
margin: 0em;
padding: 1.25em;
text-align: left;
}
p {
line-height: 1.25em;
font-family: Helvetica;
font-weight: 100;
color: #2F2D2C;
margin: 0em;
padding: 1.25em;
text-align: justify;
}
ul {
margin: 0px;
padding: 0px;
}
li {
list-style: square;
line-height: 1.25em;
font-family: Helvetica;
font-weight: 100;
color: #2F2D2C;
margin: 0.313em 0em 0.313em 0em;
padding: 1.25em;
}
img {
width: 90%;
height: auto;
max-width: 100%;
}
a {
text-decoration: none;
}
/*******ON TOP BAR******/
#menubar {
display: block;
background: #ffffff;
}
#menubar ul {
display: block;
width: 2em;
padding: 0.9em;
}
#menubar ul li {
display: inline;
}
最佳答案
em计量单位是相对于font-size计算的如果没有显式定义，则(通常)从其父元素继承的元素。用font-size的 16px , 1em将等于 16 个像素。如果 font-size使用 em 定义unit 那么它将相对于其继承的 font-size (即父元素的 font-size )。
在您的具体示例中，width的 2em将是 font-size 的两倍的 #menubar ul元素，它将继承自 body 的 font-size设置为 100% .
关于html - 如果没有宽度的父容器，宽度 em 指的是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37589714/