Question

我试图让盒子div可以点击，但我使用的代码是

display:flex;
align-items: center;
justify-content: center;

将文本水平居中，因为当我使用display：block时，如果文本很长，文本将不会水平居中。

我在这里有一个演示http://jsfiddle.net/UHECE/32/

当您尝试单击右侧div时，必须将鼠标指向文本。无论文本的长度如何，我都希望整个正确的div可以被点击（像文本一样链接）。对于左侧div，您可以将鼠标悬停在div上的任何位置，因为文本很长，所以它可以被点击。我认为这取决于文本的宽度，因为当我尝试使用Firebug并将鼠标悬停在右侧div上的文本时，高度为100％，但宽度取决于文本的长度。有谁知道如何使div成为可点击的链接？

我希望尽可能坚持使用CSS代码:)

Answer 1

右侧框中的链接标记未填满整个宽度。这就是您需要单击文本（或文本上方或下方）的原因。

通过将display:block;和width:100%;添加到link元素，它现在正在填充整个右侧框。

更新了小提琴：

http://jsfiddle.net/UHECE/33/

Answer 2

你应该把它添加到你的css文件中：

#rightq{
    margin-top:50%;
    margin-right:20%;
    height:100%;
    width:100%;
}

您想要选择.但不可能的ID：）。

如何制作带显示屏的div框：flex可点击如display：block？

2 个答案: