与<a>和<article>的设计冲突

Question

我正在使用jquery.accordion.js库，一切都很好，但是当我试图用<article>标签包装一个<a>标记时，设计发生了一些冲突。有了Test2，我就有了我想要的设计，但是通过测试，设计发生了变化，因为我在<article>标记周围使用了一个<a>标记。我希望当用户单击行(它不需要只是字母)来执行操作时，这就是为什么我希望使用嵌入在<article>标记中的<a>标记，否则如果我将<a>标记放在<article>中，只有当用户单击单词而不是整个行时，才会执行操作，您知道为什么会发生这种情况吗？或者，如果您有其他建议这样做，将受到欢迎:)

<section id="demo" data-accordion-group>
<data-accordion>
 <article data-control class="rounded test hand">Test</article>
        <div data-content>
            <a asp-action="Download" asp-controller="Apps" asp-route-folder="FolderName" asp-route-file="NameWithExtension"> <article class="articleItem">FileName</article></a>
            <a asp-action="Download" asp-controller="Apps" asp-route-folder="FolderName" asp-route-file="NameWithExtension"> <article class="articleItem">FileName</article></a>
            <a asp-action="Download" asp-controller="Apps" asp-route-folder="FolderName" asp-route-file="NameWithExtension"> <article class="articleItem">FileName</article></a>

            <article data-control class="rounded test hand"> Test2</article>
<div data-content>    

  <article class="articleItem hand" data-folder="FolderName" data-file="FileName"><a asp-action="Download" asp-controller="Apps" asp-route-folder="FolderName" asp-route-file="NameWithExtension">FileName</a></article>
        <article class="articleItem hand" data-folder="FolderName" data-file="FileName"><a asp-action="Download" asp-controller="Apps" asp-route-folder="FolderName" asp-route-file="NameWithExtension">FileName</a></article>
        <article class="articleItem hand" data-folder="FolderName" data-file="FileName"><a asp-action="Download" asp-controller="Apps" asp-route-folder="FolderName" asp-route-file="NameWithExtension">FileName</a></article>
        <article class="articleItem hand" data-folder="FolderName" data-file="FileName"><a asp-action="Download" asp-controller="Apps" asp-route-folder="FolderName" asp-route-file="NameWithExtension">FileName</a></article>[![enter image description here][2]][2]

​

​

​

​

如果您需要查看我的CSS代码，请注意：

<style type="text/css">  

    .rounded {
    border-radius:5px;
    background-color:#87CEEB;
    border-color:#bce8f1;
    border-style:solid;
    border-width:3px;
    }

    .articleItem {
    background-color:#e6f3f7;
    max-width:700px;
    border-radius:5px;
    }

    .test {
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: bold;       
    letter-spacing: 1.4px;
    border-bottom: solid 1px #446e98;
    text-transform: uppercase;
    }

    .content {
    position:relative;
    }

    .imgRight {       
    top:0px;
    right:0px;
    max-height:90px;
    max-width:90px;
    }
    .hand:hover {
  cursor: pointer; }

.articleItem:hover {
    background-color: #d6edf3 !important;
}
</style>

Answer 1

默认情况下，<a>是一个内联元素，所以这就是您获得这些异常的原因。

解决方案:通过添加

div[data-content] a {display:block}

到CSS。

顺便说一句，您应该真的应该通过验证器运行您的页面。