Question

我是从头开始创建一个网站，在我的导航栏中，我在左侧有一个div，我有一个超链接说＆＃39; Dwayne Walker＆＃39;在它。

出于某种原因，它正在溢出＆＃39;在div之外，我认为它是因为我在div中有一个对角线边框。这是一张图片：

这是我的HTML：

<div class="logo">
    <a href="index.html">Dwayne Walker</a>
</div>

这是我的CSS：

.logo {
height: 50px;
width: 200px;
border-top: 50px solid red;
border-right: 50px solid transparent;}

任何人都可以帮我解决这个问题吗？

Answer 1

您的锚文本仅在div内。但是如果您需要在边框上显示文字，那么您只需要从.logo div移除高度，因为不需要高度。然后实现以下css，就完成了。

您可以通过运行代码段来查看输出。

.logo {
    width: 200px;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    position: relative;
}

.logo a {
  position:absolute;
  top: -35px;
  left: 25px;
  color: #fff;
  }

<div class="logo">
    <a href="index.html">Dwayne Walker</a>
</div>

您也可以选择不在position:relative;中使用.logo，因为您必须将top的{{1}}属性设置为正值。


但这不是一个好习惯，因为.logo a将成为相对于身体标签或最近的父母.logo a

Answer 2

你走了！

 <div class="logo">
    <a class="site-name" href="index.html">Dwayne Walker</a>
</div>


.logo {
  height: 50px;
  width: 200px;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  position:relative;
}
.site-name {
  position:absolute;
  top:-50px;
  left:0;
}

Answer 3

使用一些额外的颜色来清楚发生了什么：

.logo {
  height: 50px;
  width: 200px;
  border-top: 50px solid red;
  border-right: 50px solid green;
  background-color: yellow;
}

<div class="logo">
  <a href="http://something">Hi</a>
</div>

不确定在边框上实际粘贴文字的最佳方法是什么，但可能有很多解决方案和意见，哪些是最好的（或者甚至是“正确”的方法来制作徽标形状）。< / p>

我的想法可能是在实际链接周围添加一个margin-top: -50px内部容器，这可能是各种可怕的风格，但可能效果相同。

.logo {
  height: 0px;
  width: 150px;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
}

.logo-content {
  height: 50px;
  margin-top: -50px;
  line-height: 50px;
  padding: 0px 10px;
}

<div class="logo">
  <div class="logo-content">
    <a href="http://something">Hi</a>
  </div>
</div>

Answer 4

我不确定究竟是什么问题。因为超链接正好是它所设想的位置。在DIV父母内部！

我猜你试图把超链接放在红色部分里面这是红色的上边界。如果是这样，可以通过使用定位来完成，这是最有效的方法：看下面的代码：

＆＃13;

  .logo {
            height: 50px;
            width: 200px;
            border-top: 50px solid red;
            border-right: 50px solid transparent;
            outline: 1px dotted green;
            position: relative;
        }

.logo a {
           position: absolute;
           top: -35px;
        }

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="logo">
    <a href="index.html">Dwayne Walker</a>
</div>
</body>
</html>

＆＃13;

在子元素上使用position：absolute是控制元素相对于具有位置的第一个父元素的位置的最有效方法：relative \ absolute。

W3Schools的：

位置：绝对; 位置为绝对的元素;相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。然而;如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。

如何阻止文本溢出div

4 个答案: