html - 标签不起作用

Question

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

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

Answer 1

这对我有用：

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 “设置”了，所以如果你改变布局，你只需要担心右上角的实际位置。否则，浮动自由右对齐标题。

此外，我明确地将我的边距设置为 0 的唯一原因.title是因为p元素设置了它们的顶部和底部边距（我认为是行高）。如果您将 the 更改p为 a div（您的选择，并且 ap具有更明确地表示文本的一些价值），那么您的.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方法，因为屏幕阅读器将无法大声读取图像。

Answer 2

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