Question

我正在使用缩略图显示按钮，然后按钮下方的说明，按钮和说明都在链接中。这是我的代码：

    <div class="col-xs-6 col-md-6 center">
        <a class="thumbnail thumbnailBorder" style="display:inline-block" >
            <input type="button" value="button"/>              
            <div>
                <span>This is just some text for StackOverflow</span>
            </div>
        </a>  
    </div>

一切正常，但是有一些空白是链接的一部分，我不希望发生这种情况，我不需要将这个空格作为链接点击。我会告诉你两张照片让你明白：

在第一张图片中，外部矩形是链接的可点击区域，除了按钮外，还有很多白色空间是链接的一部分。是否可以使用链接中的所有内容调整链接区域到按钮和文本？第二张图显示了我想要达到的目标，是否可能？

thumbnailBorder类不相关，这是内容：

.thumbnailBorder{
    border:none;
}

Answer 1

<div class="col-xs-6 col-md-6 center">
    <a class="thumbnail thumbnailBorder" style="display:inline-block" >
        <input type="button" value="button"/>
    </a>         
        <div>
            <a class="thumbnail thumbnailBorder" style="display:inline-block" > 
                <span>This is just some text for StackOverflow</span>
            </a>
        </div> 
</div>

那应该解决它。

Answer 2

请勿在{{1}}内使用按钮。如果你想保留按钮，试试这个：

＆＃13;

Answer 3

让我们谈谈语义。从我收集的内容中，您在页面上有一个想要看起来像按钮的元素，但其行为类似于锚点。所以问题是：底层HTML应该是<button> / <input>标记，还是应该是<a>标记？换句话说，模型行为或可视化是否更具语义性？

结果表明行为更具语义性。任何CSS新手都可以告诉你.danger是一个比.red更具语义的类名。使用.red限制了你的设计，阻碍了重构，除了没有真正告诉实际发生了什么。相信我，当你稍后回读代码时，你会想知道发生了什么。它在页面上的外观通常是无关紧要的。

回到您的情况，<input>标记本身应该是<a>标记。并将其包装在<div>中，以便为其提供块级空间：

<div class="col-xs-6 col-md-6 center">
    <div>
        <a class="btn thumbnail-trigger">button</a>
    </div>
    ...
</div>

你能看出这个变化导致问题变得多么简单吗？现在很明显，你需要两个<a>标签，这种情况一直都是这样。在进行改变之前，你甚至可以将元素塑造成你想要的形状。所以一起：

<div class="col-xs-6 col-md-6 center">
    <div>
        <a class="btn thumbnail-trigger">button</a>
    </div>
    <div>
        <a class="thumbnail-trigger">This is just some text for StackOverflow</a>
    </div>
</div>

现在，如果你真的希望按钮和文本之间的空间可以点击，你首先应该问自己，“如果他们点击这里，用户会尝试做什么？”如果答案是“不点击按钮”，它应该是，那么我们就完成了。但是，如果您确定可点击的空格确实是您想要的UX，那么您可以在<span>标记内添加<a>并将其设置为看起来像一个按钮，同时实际拥有<a>标记延伸到文本。

无论如何，here's a JSFiddle所有这一切。欢呼声。

Answer 4

我建议将<button>更改为<span>并将<span>设为样式，使其看起来像一个按钮。

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  color: black;
  font-weight: bold;
  font-family: Arial, sans-serif;
  background-color: yellow;
  border: 3px solid black;
}

<a href="http://google.com" target="_blank">
  <span class="btn">Button</span>
  <p>
    A description goes here.
  </p>
</a>

Answer 5

<div class="col-xs-6 col-md-6 center">
    <div class="thumbnail thumbnailBorder" style="display:inline-block">
        <div style="display: flex; justify-content: center;">
            <input type="button" value="button">
        </div>              
        <div>
            <a href="#"><span>This is just some text for StackOverflow</span></a>
        </div>
    </div>  
</div>

将链接<a></a>调整为内容

5 个答案: