Question

我想在图像和div上添加一个链接，但它似乎不起作用

<h2 style="font-size:25px;"> Unser Testsieger </h2>
<div style="width:50%; float:left;">
    <a style="display:block;cursor:pointer;" href="http://google.de">
        <img src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Kurkuma-Kapseln-229x300.png" alt="Kurkuma Kapseln" width="229" height="300" class="alignnone size-medium wp-image-76">
    </a>
    <a style="color:#fff;cursor:pointer;display:block;" href="http://google.de">
        <div style="cursor:pointer;width:220px; padding:15px; text-align:center; background-color:#FF9900;font-size:20px;margin-top:20px;">
            Bei Amazon kaufen
        </div>
    </a>
</div>

<div style="width:50%; float:right;margin-top:100px;font-size:18px;"
    <ul>
        <li style="color:green;font-size:22px;list-style-type:none;"> TOP Qualität </li>
        <li> BIO geprüft</li>
        <li> 500mg Kurkuma pro Kapsel </li>
        <li> Verbesserte Wirkung durch Piperin </li>
        <li>Lactosefrei, Fructosefrei, Glutenfrei</li>
    </ul>
</div>

Answer 1

你有未封闭的标签。它应该是这样的：

<h2 style="font-size:25px;"> Unser Testsieger </h2>
<div style="width:50%; float:left;">

<a style="display:block;cursor:pointer;" href="http://google.de">

<img src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Kurkuma-Kapseln-229x300.png" alt="Kurkuma Kapseln" width="229" height="300" class="alignnone size-medium wp-image-76" /> </a>

<a style="color:#fff;cursor:pointer;display:block;" href="http://google.de"> <div style="cursor:pointer;width:220px; padding:15px; text-align:center; background-color:#FF9900;font-size:20px;margin-top:20px;"> Bei Amazon kaufen </div> </a>
</div>

<div style="width:50%; float:right;margin-top:100px;font-size:18px;">

<ul>
<li style="color:green;font-size:22px;list-style-type:none;"> TOP Qualität </li>
<li> BIO geprüft</li>
<li> 500mg Kurkuma pro Kapsel </li>
<li> Verbesserte Wirkung durch Piperin </li>
<li>Lactosefrei, Fructosefrei, Glutenfrei</li>
</ul>
</div>

以下是一个例子：https://jsfiddle.net/692L90st/

另外请记住，你不能放置＆＃39; div＆＃39;标记为＆＃39; a＆＃39;，因为＆＃39; div＆＃39;是块标记和＆＃39; a＆＃39;是内联的。如果您将块标记放在内联标记内，则它不会是一个有效的html标记，可能会导致意外行为。

Answer 2

您的标记缺少一些关闭标记等，因此如果您始终使用缩进格式化标记，则更容易检测到此类错误。

我还建议您开始使用外部CSS而不是内联（使用外部CSS更新您的示例）。其中的好处是更容易阅读标记（这将更容易发现标记错误），使样式可重用，更容易维护。

＆＃13;

.h2 {
  font-size:25px;
}
.left {
  width:50%;
  float:left;
}
.left-inner {
  width:220px;
  padding:15px;
  text-align:center;
  background-color:#FF9900;
  font-size:20px;
  margin-top:20px;
}
.links {
  color:#fff;
  display:block;
}
.right {
  width:50%;
  float:right;
  margin-top:100px;
  font-size:18px;"
}
.li {
  color:green;
  font-size:22px;
  list-style-type:none;
}

＆＃13;

<h2 class="h2"> Unser Testsieger </h2>
<div class="left">
  <a class="links" href="http://google.de">
    <img src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Kurkuma-Kapseln-229x300.png" alt="Kurkuma Kapseln" width="229" height="300" class="alignnone size-medium wp-image-76">
  </a>
  <a class="links" href="http://google.de">
    <div class="left-inner"> Bei Amazon kaufen </div>
  </a>
</div>
<div class="right">
  <ul>
    <li class="li"> TOP Qualität </li>
    <li> BIO geprüft</li>
    <li> 500mg Kurkuma pro Kapsel </li>
    <li> Verbesserte Wirkung durch Piperin </li>
    <li>Lactosefrei, Fructosefrei, Glutenfrei</li>
  </ul>
</div>

＆＃13;

Answer 3

＆＃13;

   <h2 style="font-size:25px;"> Unser Testsieger </h2>
<div style="width:50%; float:left;">
<a style="display:block;cursor:pointer;" href="http://google.de">

<img src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Kurkuma-Kapseln-229x300.png" alt="Kurkuma Kapseln" width="229" height="300" class="alignnone size-medium wp-image-76" /> </a>

<a style="color:#fff;cursor:pointer;display:block;" href="http://google.de"> <div style="cursor:pointer;width:220px; padding:15px; text-align:center; background-color:#FF9900;font-size:20px;margin-top:20px;"> Bei Amazon kaufen </div> </a>
</div>

<div style="width:50%; float:right;margin-top:100px;font-size:18px;">
<ul>
<li style="color:green;font-size:22px;list-style-type:none;"> TOP Qualität </li>
<li> BIO geprüft</li>
<li> 500mg Kurkuma pro Kapsel </li>
<li> Verbesserte Wirkung durch Piperin </li>
<li>Lactosefrei, Fructosefrei, Glutenfrei</li>
</ul>
</div>

＆＃13;

Answer 4

<div>
    <a href="http://google.de">
        <div style="width:250px;max-height:250px;">

            <img style="width: 100%; display: inline-block;" alt="Brackets" src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Kurkuma-Kapseln-229x300.png" data-lazy-loaded="true">
    </a>
</div>

我希望这可以帮助你...

Answer 5

你的HTML不合适。很少有标记丢失.Dom不会像你期望的那样构建

尝试下面的代码“

  17   The Double Helix   James Watson, Francis Crick   Barnes, Amazon, Harvard Coop
  19   Faking Contracts   Dewey, Cheatham, Howe         Law Bookstore, Amazon

`

链接不工作div和图像

5 个答案: