如何将文本(列表)向右对齐,并使其上方的图像也向右对齐,但使它们都固定在距离屏幕左侧10%的位置。我还希望这两个元素都是固定的。如果有人想要链接到它,我有一个代码笔,但它超级简单,没有我想要的效果。我基本上只想把它作为我的"标题",然后把网站的主体放在它的右侧。例如:
######## body------->
# #
# # body------->
# #
######## body------->
body------->
Item 1 body------->
Item 2
Item Number 3
Item #4 body------->
我有一个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;
}
页眉和正文的宽度可以根据您的意愿进行更改。如果你想做其他事情,请告诉我。
您也可以根据所应用的CSS将padding-right: 10%;
更改为margin-right: 10%
。