Question

我的html锚点按钮超出包装器边界。当我定义它的高度和宽度时，它会出现在包装内，但我不想定义高度和宽度。

我的html和css代码如下：

链接示例

<style>

    *
    {
        margin:0;
        padding:0;
    }

    body
    {
        font-family:Verdana, Geneva, sans-serif;
        font-size:12px;
        color:#fff;
        font-weight:400;
    }
    .wrapper
    {
        width:500px;
        height:100px;
        margin:50px auto 0 auto;
        border:1px solid #000;
    }
    .btn-all
    {
        background:#666;
        padding:5px 10px;
        color:#fff;
        text-decoration:none;
    }
    .btn-all:hover
    {
        background:#900;
        color:#fff;
    }




</style>

<body>
    <div class="wrapper">
        <a href="#" class="btn-all">Click Me</a>

    </div>
</body>

Answer 1

因为a是display inline 元素并且提供给a 元素 display属性inline-block就像这样

定义到此

.btn-all{display:inline-block;vertical-align:top;}

<强>演示

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #fff;
  font-weight: 400;
}
.wrapper {
  width: 500px;
  height: 100px;
  margin: 50px auto 0 auto;
  border: 1px solid #000;
}
.btn-all {
  background: #666;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  vertical-align: top;
}
.btn-all:hover {
  background: #900;
  color: #fff;
}

＆＃13;

<body>
  <div class="wrapper">
    <a href="#" class="btn-all">Click Me</a>

  </div>
</body>

＆＃13;

Answer 2

请尝试这个：

.btn-all
    {
        background:#666;
        padding:5px 10px;
        color:#fff;
        text-decoration:none;
        margin-top:20px;
        position:fixed;
        margin-left:20px;
    }

DEMO

或者 DEMO 1

的CSS：

.btn-all
    {
        background:#666;
        padding:5px 10px;
        color:#fff;
        text-decoration:none;

        display: inline-block;
  vertical-align: top;
    }

Answer 3

此答案显示如何使链接不会延伸到包装器之外。它使用display block代替display inline-block来限制链接到文本内容的宽度，但要占用容器的整个宽度。

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #fff;
  font-weight: 400;
}
.wrapper {
  width: 500px;
  height: 100px;
  margin: 50px auto 0 auto;
  border: 1px solid #000;
}
.btn-all {
  background: #666;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
  display: block;
  vertical-align: top;
}
.btn-all:hover {
  background: #900;
  color: #fff;
}

＆＃13;

<body>
  <div class="wrapper">
    <a href="#" class="btn-all">Click Me</a>

  </div>
</body>

＆＃13;

为什么锚点按钮离开包装边界？

3 个答案: