如何让我的链接文本不在 Div 之外运行？答案

【问题标题】：How do i get my link text to not run outside of the Div?如何让我的链接文本不在 Div 之外运行？
【发布时间】：2016-10-18 01:16:48
【问题描述】：

https://jsfiddle.net/LnbcfmL3/

HTML

<div class="Nav">
            <a href="C:\Users\user\Desktop\Computer Science\Rugby_Arguement.html"> Rugby Arguement </a>
        </div>
        <div class="Nav">
            <a href="C:\Users\user\Desktop\Computer Science\Football_Arguement.html"> Football Arguement </a>
        </div>

CSS

.Nav{
position: relative;
display: inline-block;
height: 100px;
width: 200px;
border-radius: 100px / 50px;
border: 2px solid black;
left: 150px;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px /50px;
text-align: center;
background-color: #FF6600;
}
a{
text-align: center;
}

这就是我到目前为止所得到的，我的椭圆中的链接文本已经超出了 div 本身。我已经尝试了其他问题中建议的事情大约 2 个小时，但似乎没有任何效果。提前致谢。

【问题讨论】：

将：overlfow: hidden 添加到您的 .Nav 类中。
将您的a absolutely 定位在Nav 中

标签： html css web

【解决方案1】：

如果你绝对定位'a'，加上顶部和底部位置，你可以达到你想要的。

a {
position: absolute;
text-align: center;
top: 30px;
left: 40px;
}

【讨论】：

【解决方案2】：

看看下面的 jsfiddle，看起来怎么样？

我所做的是更改width 并更改<a> 标签的位置

https://jsfiddle.net/mk8xx5zg/

希望这会有所帮助。

这里你可以了解更多关于 css 中的 position 属性： http://www.w3schools.com/css/css_positioning.asp

【讨论】：

【解决方案3】：

利用display:flex可以实现更动态的方法

.Nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

通过在父元素上使用上述声明，子元素现在将垂直和水平居中（无论大小，因此不需要硬定位或大小值）

查看更新的小提琴：https://jsfiddle.net/LnbcfmL3/1/

A great Flexbox tutorial by css-tricks

【讨论】：