Question

我想创建一个最小的目标网页，其中整个屏幕分为2个文本链接，点击进入网站的每个部分。

我想出了这么多：

我使用了两半来创建分界线，使用一侧的边框在中间创建线条。这是非常简陋的。

.left-half {
    position: absolute;
    left: 0px;
    width: 50%;
    border-style: solid;
    border-width: 1px;
    border-left: none;
    border-top: none;
    border-bottom: none;
}

.right-half {
    position: absolute;
    right: 0px;
    width: 50%;
}

现在我想做的是让每一半的整体可点击，而不是仅仅文字。尝试了几个不同的选择无济于事。有什么建议吗？

Answer 1

只需要<a>块！绝对没有必要使用JS。

  <a href="http://www.google.com" class="left-half">
    <article>
      <p>Google</p>
    </article>
  </a>

然后只需将<a>设置为块，因为您在.left-half班级设置了高度，默认情况下<a>元素是内嵌的，因此要height工作，你需要把它变成一个块：

.container a {
  display: block;
  // add any other CSS you want to apply
}

工作片段：您的Google看起来与Youtube完全相同，擅长整个块现在是链接：

* {
  box-sizing: border-box;
}

body {
  font-size: 18px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  line-height: 150%;
  text-decoration: none;
}

a.left-half {
  height: 100%;
  display: block;
}

section {
  color: #000;
  text-align: center;
}

div {
  height: 100%;
}

article {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 20px;
}

.container {
  display: table;
  width: 100%;
}

.left-half {
  position: absolute;
  left: 0px;
  width: 50%;
  border-style: solid;
  border-width: 1px;
  border-left: none;
  border-top: none;
  border-bottom: none;
}

.right-half {
  position: absolute;
  right: 0px;
  width: 50%;
}

a {
  color: inherit;
  text-decoration: none;
}

<section class="container">

  <a href="http://www.google.com" class="left-half">
    <article>
      <p>Google</p>
    </article>
  </a>

  <div class="right-half">
    <article>
      <p><a href="http://www.youtube.com">YouTube</a></p>
    </article>
  </div>

</section>

Answer 2

如果您不希望mofify您的HTML结构，那么您可以使用伪填充整个区域作为链接进行响应。https://jsfiddle.net/m2ne5f3b/7/

* {
  box-sizing: border-box;
}
	
body {
  font-size: 18px;
  font-family: 'Cormorant Garamond', serif;
  font-style:italic;
  line-height: 150%;
  text-decoration: none;
}

section {
  color: #000;
  text-align: center;
}

div {
  height: 100%;
}

article {
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}

.container {

}

.left-half {
  position: absolute;
  display:table;
  top:0;
  left: 0px;
  width: 50%;
  border-style: solid;
  border-width: 1px;
  border-left: none;
  border-top: none;
  border-bottom: none;
  
}

.right-half {
  position: absolute;
  top:0;
  right: 0px;
  width: 50%;
  display:table;
}
	
a { color: inherit; 
  text-decoration: none;} 
	
  a:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    }
  }

<section class="container">

 <div class="left-half">
     <article>
      <p><a href="http://www.google.com">Google</a></p>
    </article>
	  </div>
	  
  <div class="right-half">
    <article>
      <p><a href="http://www.youtube.com">YouTube</a></p>
    </article>
  </div>
  
</section>

注意：如果页面是2个链接并排的样式很少，那么html可以缩减为2个链接

html {
  height: 100%;/* necessary for the table-layout box model demo */
  width: 100%;/* necessary for the table-layout box model demo */
  display: table;/* necessary for the table-layout box model demo */
  table-layout: fixed;/* necessary for the table-layout box model demo */
  border-collapse: collapse;
  background: tomato;
}

body {
  display: table-row;/* necessary for the table-layout box model demo */
}

a {
  display: table-cell;/* necessary for the table-layout box model demo */
  text-align: center;/* necessary for the table-layout box model demo */
  vertical-align: middle;/* necessary for the table-layout box model demo */
  box-shadow: 0 0 0 1px;
  text-decoration: none;
  color: black;
  font-size: 40px
}

a:nth-child(odd) {
  background: rgba(255, 114, 25, 0.5);
}

<a href="http://www.google.com">Google</a>
<a href="http://www.youtube.com">YouTube</a>

Answer 3

你常见的标签不会在这里削减它。最好的办法是在div上使用Javascript或jquery函数调用。

<div class='left-half' onclick="fakeLink()" > 
<!-- some stuff here in the div -->
</div>

然后在脚本文件

中

function fakeLink() {
window.location = "http://www.yoururl.com/link";
}

Answer 4

* {
  box-sizing: border-box;
}
	
body {
  font-size: 18px;
  font-family: 'Cormorant Garamond', serif;
  font-style:italic;
  line-height: 150%;
  text-decoration: none;
}

section {
  color: #000;
  text-align: center;
}

div {
  height: 100%;
}

article {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 20px;
}

.container {
  display: table;
  width: 100%;
}

.left-half {
  position: absolute;
  left: 0px;
  width: 50%;
  border-style: solid;
  border-width: 1px;
  border-left: none;
  border-top: none;
  border-bottom: none;
  
}

.right-half {
  position: absolute;
  right: 0px;
  width: 50%;
}
	
a { color: inherit; 
  text-decoration: none;}

<section class="container">
  <a href="http://www.google.com">
    <div class="left-half">
      <article>
        <p>Google</p>
      </article>
    </div>
  </a>
  <a href="http://www.youtube.com">    
    <div class="right-half">
      <article>
        <p>YouTube</p>
      </article>
    </div>
  </a>
</section>

如何使整个DIV成为一个链接

4 个答案: