将 LI 的文本与其他元素对齐

Question

我们的平面设计师向我发送了以下图片，说明我们的页面应该是什么样子：

因此<li> 元素的文本应与顶部的徽标和列表上方的标题对齐。我似乎找不到精确指定这种关系的方法。我最终调整了li 的margin-left 样式，直到它们看起来与我的浏览器中的标题差不多，但这似乎在不同的设备和浏览器中并不可靠。包含前两个元素的#image-header 和#instruction-header DIV 上的padding-left: 1em; 与#instructions li 上的margin-left: 1.3em 之间没有直接关系。

有没有办法设置这些样式以确保对齐？

如果我把文本排成一行，我能确定数字不会超出页面边界吗？

#image-header {
  background-color: #fcfb91;
  padding-top: 5px;
  padding-left: 1em;
}
.image-container {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
#instructions li {
  margin-bottom: 1em;
  margin-left: -1.3em;
}
#instruction-header {
  background-color: #336699;
  color: white;
  width: 20em;
  padding-bottom: 2px;
  padding-top: 2px;
  padding-left: 1em;
}

<div id="image-header">
  <div class="image-container">
    <img src="//dev.bridgebase.com/barmar_test/mp/acbl/bbo.png" alt="BBO Logo">
  </div>
  <div class="image-container">
    <img src="//dev.bridgebase.com/barmar_test/mp/acbl/invitetext.png" alt="Invite some friends">
  </div>
</div>
<div style='font-family: "Ariel", sans-serif'>
  <h3 id="instruction-header">How it works</h3>
  <ol id="instructions">
    <li>Every friend you invite who has not played an ACBL tournament on BBO is eligible for the promotion.</li>
    <li>Each of you will earn BB$5 when your friend creates a BBO username (if he's not already a BBO user) and registers a valid ACBL number. The bonus will be automatically deposited in each of your BBO accounts.
    </li>
    <li>There is no limit to the number of bonuses you can earn within the deadline of the promotion.</li>
    <li>Once you refer, each friend will receive an email from BBO.</li>
    <li>The deadline is Nov 1, 2015. Your friend must use that referral email to successfully create a BBO username and register his ACBL number by that date for both of you to earn the bonuses.
    </li>
  </ol>
</div>

Answer 1

我认为您应该从#instructions li 中删除左边距，而是定义#instructions ol 的左边距。如果将其设置为 1em，则它与徽标完美对齐

编辑：给你：

#image-header {
  background-color: #fcfb91;
  padding-top: 5px;

}
.image-container {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}    

#instructions, #image-header {
  padding-left: 1em;
}

#instructions li {
  margin-bottom: 1em;
}

#instruction-header {
  background-color: #336699;
  color: white;
  width: 20em;
  padding-bottom: 2px;
  padding-top: 2px;
  padding-left: 1em;
}

<div id="image-header">
  <div class="image-container">
    <img src="//dev.bridgebase.com/barmar_test/mp/acbl/bbo.png" alt="BBO Logo">
  </div>
  <div class="image-container">
    <img src="//dev.bridgebase.com/barmar_test/mp/acbl/invitetext.png" alt="Invite some friends">
  </div>
</div>
<div style='font-family: "Ariel", sans-serif'>
  <h3 id="instruction-header">How it works</h3>
  <ol id="instructions">
    <li>Every friend you invite who has not played an ACBL tournament on BBO is eligible for the promotion.</li>
    <li>Each of you will earn BB$5 when your friend creates a BBO username (if he's not already a BBO user) and registers a valid ACBL number. The bonus will be automatically deposited in each of your BBO accounts.
    </li>
    <li>There is no limit to the number of bonuses you can earn within the deadline of the promotion.</li>
    <li>Once you refer, each friend will receive an email from BBO.</li>
    <li>The deadline is Nov 1, 2015. Your friend must use that referral email to successfully create a BBO username and register his ACBL number by that date for both of you to earn the bonuses.
    </li>
  </ol>
</div>