Question

我正在构建我的第一个drupal网站，我有一些CSS问题，因为html无法更改。我认为这是我需要做的一个小调整，但是我没有看到它...我希望链接标签具有100％的宽度和高度，这样当你点击容器时你就会看到博客项目详情页面（不仅是标题或更多链接阅读）

我简化了Drupal代码。我还创建了一个小JSfiddle

HTML

<div class="node-blog-entry" id="node-10">
  <h2><a href="/drupal/blog/2nd-blog-item">2nd blog item</a></h2>

  <div class="submitted">          
    <span>Submitted by root on 20 November, 2013 - 19:43</span>    
  </div>

  <div class="content">
    <div class="field-name-body">
      <div class="field-items">
        <div class="field-item even">            
          <p>blablablab</p>
        </div>
      </div>
    </div> 
  </div>

  <ul class="links inline">
    <li class="node-readmore first last"><a href="">Read more</a></li>
  </ul> 
</div>

CSS

.node-blog-entry
{
margin-bottom: 15px;
width: 100%;
max-height: 9999px;
padding: 3% 0;
background-color: lightblue;
}
.node-blog-entry:hover
{
    background-color: rgba(240,240,240,1);
}
.node-blog-entry > *
{
padding:0 3%;
}
.node-blog-entry h2
{
display:block;
background-color: grey;
width: 94%;
min-height: 94%;
color: rgba(68,68,68,1);
}
.node-readmore
{
list-style:none;
float:right;
}

提前致谢， HS。

Answer 1

您可以使用position:absolute执行此操作，并将完整容器设为其相对父级：

.node-readmore {
  list-style:none;
  float:right;
}

.node-blog-entry {
  position:relative;
 }
.node-blog-entry .node-readmore a{
  position:absolute;
  text-align:right;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
}

此处的示例 http://jsfiddle.net/Y5HNF/4/

此处的问题是您要牺牲a标记上文本的位置。您可以使用其他属性修复此问题，例如box-sizing和padding。

Answer 2

您可以使用<a>和100％宽度和高度制作display: block全宽和高度，如下所示：

.node-blog-entry h2 a {
    width:100%;
    height: 100%;
    display:block;
}

内部h2需要100％高度

HTML

CSS

2 个答案: