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

时间:2014-05-28 08:50:31

标签: html css

我试图让盒子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代码:)

2 个答案:

答案 0 :(得分:2)

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

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

更新了小提琴:

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

答案 1 :(得分:1)

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

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

您想要选择.但不可能的ID:)。