Question

我正在研究CSS文件以获取初学者的互联网编程课程。问题在于，每当我将部分中的图像变成链接时，它就会将部分的其余部分搞定。我在这张图片的上方有一个导航列表，下方的图像和链接在导航栏下方对齐，而下面的所有其他内容都保持对齐。

以下是代码：

<p>If you click on the Personal link, you can browse my favorite Halloween pictures, 
    stories, and films. And if you join my email list, I will keep you up-to-date on 
    all things Halloween.</p>
<h2>Product of the Week</h2>
  <a href="products/cat.html">
         <img src="images/cat1.jpg" alt="20'' Deranged Cat">
  </a>
  <br>
  <a href="products/cat.html">20" Deranged Cat</a>
  <h2>My guarantee</h2>
  <p>If you aren't completely satisfied with everything you buy from my site, you can return it 
    for a full refund. 
  <strong>No questions asked!</strong></p>

这里是CSS：

 /* Section */
section 
{
    margin: 20px 25px 25px 25px;
}

section h1 
{ 
    font-size: 150%;
    margin-bottom: .5em;
    margin-left: 200px;
}

section h1:first-letter 
{ 
    font-size: 250%;
}

section h2 
{
    font-size: 125%;
    margin: .8em 0 .5em 0;
    margin-left: 200px;
}

section p 
{
    margin-bottom: .5em;
    margin-left: 200px;
}

/*Formatting for added Product of Week Request in Section 6 Bullet 4*/
/*Changed for Section 7, Bullet 3*/
section img a
{
    margin: 300px;
}

section a
{
    display: inline;
}

/* Footer */

请告诉我我做错了什么！

Answer 1

不确定你要做的是什么，但是如果你试图将它们放在同一行上，你可以将文本包装在span标签中，并将图像和文本放在一个标签中，就像这样。

检查更新的小提琴js fiddle

<a href="products/cat.html">
    <img src="images/cat1.jpg" alt="Cat">
    <span>20" Deranged Cat</span>
 </a>

Answer 2

Damann23，欢迎来到SO ...来调整您必须熟悉的几个属性，例如

float:left;
display:inline;

我把你的代码放在一个小提琴中，虽然它需要工作，但这可以让你知道如何开始。但是请记住，在部分（div）中组织代码它总是很聪明，而不是在工作表中运行所有内容。这样您就可以单独管理这些部分

DEMO

对齐图片，使其不会在导航列表下包裹。

2 个答案: