利润率链接 - 需要从链接区域

排除缘我有这样的jsfiddle：https://jsfiddle.net/96urhqcz/利润率链接 - 需要从链接区域

有连续4个格 - 的HTML看起来像这样：

<div class="g-1-4 app"> 
    <a style="text-decoration:none;" href="https://link1/"> 
    <div style="margin:10px; padding: 30px 0px; background:#E74C3C" class="app"> 
     <i class="fa fa-3x fa-comments-o" width="50%" style="display:block; margin:auto" src="/static/launcher/comments-o"></i> 
     Link Number 1 
    </div> 
    </a> 
    </div> 

    <div class="g-1-4 app"> 
    <a style="text-decoration:none;" href="https://link2/"> 
    <div style="margin:10px; padding: 30px 0px; background:#9D55B8" class="app"> 
     <i class="fa fa-3x fa-paper-plane" width="50%" style="display:block; margin:auto" src="/static/launcher/paper-plane"></i> 
     Link Number 2 
    </div> 
    </a> 
    </div> 

    <div class="g-1-4 app"> 
    <a style="text-decoration:none;" href="https://link3/"> 
    <div style="margin:10px; padding: 30px 0px; background:#3395DD" class="app"> 
     <i class="fa fa-3x fa-street-view" width="50%" style="display:block; margin:auto" src="/static/launcher/street-view"></i> 
     Link 3 
    </div> 
    </a> 
    </div> 

    <div class="g-1-4 app"> 
    <a style="text-decoration:none;" href="https://link4/"> 
    <div style="margin:10px; padding: 30px 0px; background:#00838F" class="app"> 
     <i class="fa fa-3x fa-line-chart" width="50%" style="display:block; margin:auto" src="/static/launcher/line-chart"></i> 
     Link 4 
    </div> 
    </a> 
    </div>

的CSS的G-1-4是这样的：

.g-1-4{ 
    width: 25%; 
}

正如你可以在看的jsfiddle - 框之间的空间被“链接”到相应的框。

最终我试图有一个4横跨布局，但有边距不是链接。当用户将鼠标放在两个盒子之间时，我希望它是一个没有可点击性的普通鼠标。

我确定这是一件非常简单的事情，我很想念 - 但我似乎无法纠正它。

任何想法或想法？

来源

2017-08-07 Hanny

你的问题是，你必须在左侧和右侧，这就是为什么你的链接都是围绕“真实”的div花费的原因填充。考虑使用余量而不是填充。 –

我确实在边缘有10px的边距，但这似乎没有什么区别（如果您扩大边距并减少填充 - 边距区域仍然是链接的）。 – Hanny

从<div>取下保证金并将其添加到包装div的<a>。还要将style="display:block:"添加到<a>。

This CodePen has the updates.

来源

2017-08-07 14:35:23 Beepye

可以固定宽度设置为您的div，并使用Flexbox的他们将与未“链接”空间automaticaly显示。

希望这个小代码能帮助你。

.flex { 
 
    display : flex; 
 
    justify-content : space-around; 
 
} 
 

 
.div1, .div3 { 
 
    width : 120px; 
 
    height : 120px; 
 
    background-color : red; 
 
} 
 

 
.div2, .div4 { 
 
    width : 120px; 
 
    height : 120px; 
 
    background-color : blue; 
 
} 
 

 
p { 
 
    margin : 0; 
 
    color : white; 
 
    line-height: 120px; 
 
    font-size : 12px; 
 
    text-align : center; 
 
}

<div class="flex"> 
 

 
    <a href="#" class="div1"> 
 
    <p>LINK 1</p> 
 
    </a> 
 
    
 
    <a href="#" class="div2"> 
 
    <p>LINK 2</p> 
 
    </a> 
 
    
 
    <a href="#" class="div3"> 
 
    <p>LINK 3</p> 
 
    </a> 
 
    
 
    <a href="#" class="div4"> 
 
    <p>LINK 4</p> 
 
    </a> 
 

 
</div>

来源

2017-08-07 14:33:05

我真的很喜欢flexbox的想法 - 但我不确定它会如何影响站点的其他区域，所以它需要更多的测试。我积极反映答案的恰当性。谢谢！ – Hanny

问题 - 有没有一种方法可以用％宽度来做到这一点？或者你必须使用flexbox的固定宽度？ – Hanny

-1

正在发生的事情是，联动元件扩展到容器div的100％获得一些空间，你可以设置一个特定宽度的标签，或者你可以添加一些填充到容器元素，你将不得不使用填充和宽度来使它看起来不错。

https://jsfiddle.net/96urhqcz/1/

.g-1-4{ 
    width: 25%; 
    padding: 10px; 
}

来源

2017-08-07 14:34:19

问题是从使用表格单元格中显示方法您的到来。

我也支持路易斯指出的弹性盒使用。

来源

2017-08-07 14:34:37 Happysmithers

利润率链接 - 需要从链接区域

回答

相关问题