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

Question

我们的平面设计师向我发送了以下图片，了解我们的网页应该如何显示：

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

有没有办法对这些进行设计以确保对齐？

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

＆＃13;

＆＃13;

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

＆＃13;

main

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

完全对齐

编辑：你走了：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;