Question

我使用laravel框架。 $ var-＆gt; title使两个不同的按钮彼此相邻。

所以我有这个代码

<div class="header-button btn form-control">
   <a href="{{$var->writefullurl}}">
       {{($var->title)}}
   </a>
</div>

代码工作正常，但按钮的顶部和底部无法点击。

我尝试将代码更改为此代码，因为某些原因导致它破坏了CSS。

<a href="{{$var->writefullurl}}">
   <div class="header-button btn form-control">
     {{($var->title)}}
   </div>
</a>

CSS：

a {
    color: #337ab7;
    text-decoration: none;
}
.form-control {
    border-color: #00aae4;
    padding-top: 10px;
    border-radius: 2px !important;
    border-width: 1px;
    margin-bottom: 10px;
    height: 45px;
}

任何帮助将不胜感激！

Answer 1

您不需要更改html代码顺序，您可以做的是更改您设置填充的元素，例如：

.form-control a {
    color: #337ab7;
    text-decoration: none;
    padding-top: 10px;
    height: 45px;
    display: inline-block;
}
.form-control {
    border-color: #00aae4;
    border-radius: 2px !important;
    border-width: 1px;
    margin-bottom: 10px;
}

注意：确保display: inline-block标记上有a，以便可以应用填充

div里面的href废墟造型

1 个答案: