Question

是的我正在学习......我知道这不是最好的方式，但我所有的CSS都是内联的。如果有人有任何建议，那就太棒了。

我的标签'Big Valve Cylinder Heads'由于某种原因从下面的div标签中拾取一些css并改变颜色/下划线。为什么这样做？如果我删除锚标签，一切都很好。

但是 - 第一节'Stroker Engine Kits'一切都很好！而且只是代码被复制了！

见下文：

http://5.77.57.189/~admin/productscopy.html

<div class="container">
<h1 style="padding-left:10px;">Cosworth Performance Products Distributors & Dealers </h1>

<div class="row">

    <div class="four columns">
        <p>Stroker Engine Kits</p>
            <div style="padding-top:10px;"><img src="images/stroker.jpg"></div>
            <div style="float:left;"><img src="images/arrow.gif"></div>
            <div style="width:170px; height:21px; background-color: #a8a9ad;"><p style="font-size:10px;"><a href="http://google.co.uk" style="text-decoration:none; padding-left:10px; ">More Information<a/></p></div>
    </div>

    <div class="four columns">
        <p>Big Valve Cylinder Heads</p>
            <div style="padding-top:10px;"><img src="images/20004544.jpg"></div>
            <div style="float:left;"><img src="images/arrow.gif"></div>
            <div style="width:170px; height:21px; background-color: #a8a9ad;"><p style="font-size:10px;"><a href="http://google.co.uk" style="text-decoration:none; padding-left:10px; ">More Information<a/></p></div>
    </div>

</div>

另外 - 有人知道如何删除图像和下面的更多信息框之间的空白区域吗？保证金：0;不工作！

谢谢你们：）

Answer 1

您应该将 display：block; 添加到div中的所有图片以删除空格。

<div style="width:170px; height:21px; background-color: #a8a9ad;">
   <p style="font-size:10px;">
      <a href="http://google.co.uk" style="text-decoration:none; padding-left:10px; ">More Information<a/>
   </p>
</div>

你的结束标签是错误的，这就是为什么一旦你删除它就一切正常。它应该是

</a>

然后一切都将被修复。干杯！

Answer 2

欢迎，学习的好地方。

嗯，你没有获得任何css，只因为你有'<a>'标签（意味着你会把它变成一个链接，这样就可以使你的标题出现在你的标题之下。

如果您删除'<a>'将修复:) 见：

<a>
                <p>Big Valve Cylinder Heads</p>
                <div style="padding-top:10px;"><img src="images/20004544.jpg"></div>
                <div style="float:left;"><img src="images/arrow.gif"></div>
</a>

尝试使用：https://jsfiddle.net/因此我们更容易测试并给出快速答案。

尝试那样从a：

中删除p链接

<p>Big Valve Cylinder Heads</p>
<a>

                <div style="padding-top:10px;"><img src="images/20004544.jpg"></div>
                <div style="float:left;"><img src="images/arrow.gif"></div>
</a>

你可以在这里了解更多： http://www.w3schools.com/css/css_link.asp http://www.w3schools.com/tags/att_a_href.asp

Answer 3

检查，底线的结束锚标记中有拼写错误。这样的事情可能导致不可预测的行为

<a/>

另一个好的做法是通过将CSS规则放在单独的CSS文件中来将CSS与HTML分开。

Answer 4

它实际从<a>标记中获取默认css。 <a>标记通常用于链接，这就是为什么它带下划线和蓝色（如默认链接）。

您可以通过向<a>添加一个类并添加<p class="paragraph">之类的css来覆盖.paragraph{text-decoration: none; color: black; }标记的css。这将关闭下划线效果。

或者您可以在.js中放置一个点击事件，以便在用户点击“Big Valve Cylinder Heads”时将用户发送到您想去的位置。

我的<p>正在拿起一个</p> <div>的CSS？为什么？

4 个答案: