将图像对齐到与文本右对齐的相同边距

Question

您将如何将文本（列表）向右对齐并使其上方的图像也向右对齐，但让它们都固定并距屏幕左侧 10%。我还希望修复这两个元素。如果有人想要它的链接，我有一个 codepen，但它非常简单并且没有我想要的效果。我基本上只是想把它作为我的“标题”，然后将网站的主体放在它的右侧。例如：

        ########             body------->
        #      #
        #      #             body------->
        #      #
        ########             body------->


                             body------->


          Item 1             body------->
          Item 2
   Item Number 3
         Item #4             body------->

Answer 1

我有一个JSFiddle你可以看看。

HTML

<div id="header">
  <img src="http://placehold.it/100x100">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item Number 3</li>
    <li>Item #4</li>
  </ul>
</div>
<div id="body">
  BODY
</div>

CSS

#header,
#body {
  display: inline-block;
}

#header {
  width: 40%;
  float: left;
  text-align: right;
}

#header img,
#header ul {
  padding-right: 10%;
}

ul  {
    list-style: none;
}

#body {
  width: 60%;
  float: right;
}

标题和正文的宽度可以随意更改。如果您还想做其他事情，请告诉我。

您还可以将 padding-right: 10%; 更改为 margin-right: 10%，具体取决于您应用的 CSS。