Question

我正在尝试将“邀请”一词添加到与“返回照片”链接对齐的页面右上角。但是，当我添加新的<div>然后启动<p>时，一旦我应用CSS，该段落就不能正确对齐页面。

我上传了遇到问题的页面：http://ashliamabile.com/invitations.html

Answer 1

 <div id="backtophotos">
   <a href="print.html"><img src="images/backprint.png" border="0"></a>
   <p>invitations</p>
 </div>

CSS

#backtophotos p{
  float:right;
} 
#backtophotos a{
   float:left;
}
#backtophotos{ /*Clear float : any one of this method - micro clearfix, clearfix,  overflow method, float, clear both */ 
  overflow:hidden;
  width:100%;
}

Answer 2

这对我有用：

HTML：

<div id="backtophotos">
    <a href="print.html"><img src="images/backprint.png" border="0"></a>
    <p class="title">invitations</p>
</div>

CSS：

/*Drop the width property and set div to position:relative */

#backtophotos {
    height: 20px;  /* removed width */
    background-repeat: no-repeat;
    margin: 0 0 0 100px;
    position: relative;  /* set positon to relative */
}

/* Set title p to position absolute and remove margins: */

.title {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
}

上述方法有效，因为div宽度已被外部div“设置”，因此如果更改布局，只需要担心右上角的实际位置。否则，浮动右对齐标题。

此外，我明确将.title的边距设置为0的唯一原因是因为p元素的顶部和底部边距已设置（我认为是行高）。如果您将p更改为div（您的选择，并且p有一些更明确用于文本的值），那么您的.title规则就是：

.title {
    position: absolute;
    right: 0;
    top: 0;
}

这正是你正在寻找的，没有任何额外的技巧或调整（这是我的万圣节说唱专辑的名称）。

就个人而言，我实际上会更喜欢：

<div id="backtophotos">
    <h2><a href="print.html">back to print</a><h2>
    <h2 class="title">invitations</h2>
</div>

处理清除所有默认浏览器css，因为上面的内容最具语义性。我还建议不要将图像用于“返回打印”文本，并探索其中一种CIR方法，因为屏幕阅读器无法大声朗读图像。

<p>标签无法在</p> <div> </div>中使用

2 个答案:

HTML：

CSS：