Question

我希望将填充：10px 15px转换为百分比，但是当我这样做时，文档区域变得更小并且完全错误。

我不确定我是否计算错误，文档区域是40px宽，我想要一个15px填充，所以我会做15/40 * 100？

之前，这是我的第一个JSfiddle

<header class="main-header">
    <h1 class="main-logo"><a href="#">Name</a></h1>

    <h2 class="main-sub">Sub-Header</h2>

<ul class="main-nav">
    <li><a href="#">About</a>

    </li>
    <li><a href="#">Work</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
</ul>
</header>

.main-logo {
margin: 0;
}
.main-nav {
text-align: center;
}
.main-nav li {
display: inline-block;
margin: 0 5%;
}
.main-logo a, .main-nav a {
display: block;
color: #333;
text-align: center;
text-decoration: none;
padding: 10px 15px;
border-radius: 4px;
}
.main-logo a {
font-family: sans-serif;
font-size: 1.75em;
font-weight: 700;
text-transform: uppercase;
}
.main-nav a:hover {
background-color: #333;
color: #ffffff;
}
.main-sub {
text-align:center;
}

这是我计算后的JSfiddle，37.5％看起来不正确。看看它如何改变了文档区域？

http://jsfiddle.net/a12xakka/

谢谢。

问题将像素填充转换为百分比

0 个答案: