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

Question

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

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

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

Aligning Image to Same Margin as Text Aligned Right

html

css

themes

position

alignment