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

Question

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

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

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

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

#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，它会与 Logo 完美对齐

编辑:给你:

#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>