制作链接<a></a>可调内容

我使用缩略图显示一个按钮，然后在按钮下方的说明，按钮和描述都是一个链接里面。这是我的代码：制作链接<a></a>可调内容

<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; 
}

来源

2017-03-02 AlexGH

只是在文本周围有''（没有按钮），并将相同的“进程”绑定到按钮。 –

在“”元素中不能有'

http://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5 – Stickers

不要使用按钮的a内。如果你想保持按钮，试试这个：

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

来源

2017-03-02 15:27:42

<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>

这应该修复它。

来源

2017-03-02 15:21:50

我永远不会在链接中包装一个按钮 – mplungjan

正是这样。只需将包装按钮的锚点更改为div并添加一个onclick事件即可。 – Hewlett

我建议将<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>

来源

2017-03-02 15:23:35 hungerstar

<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>

来源

2017-03-02 15:33:30 acgrdumlu

单击您的按钮不会将用户带到任何地方。 – hungerstar

讲起语义。从我收集的内容来看，网页上有一个元素，您想要看起来像一个按钮，但行为像一个锚点。所以，问题是：如果基础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>

现在，如果你真的想要的按钮和文本之间权利的空间可点击，你应该先问自己，“你会在用户试图做，如果他们点击这里？ “如果答案是“不要点击按钮”，它应该是，那么我们就完成了。但是，如果您决定可点击的空白区域真的是您想要的用户体验区域，则可以将<span>放在<a>标签和样式中，使其看起来像一个按钮，而将<a>标签实际上延伸至文本。

反正，here's a JSFiddle与所有。干杯。

来源

2017-03-02 16:13:58 bowheart

制作链接<a></a>可调内容

回答

相关问题