使按钮 type=submit 看起来像锚一样包裹答案

【问题标题】：Making a button type=submit look and wrap like an anchor使按钮 type=submit 看起来像锚一样包裹
【发布时间】：2017-04-01 15:12:24
【问题描述】：

我在一个表单上有一个提交按钮，我希望它的样式和行为像一个锚。我曾尝试在 css 中执行此操作，但您可以在我的 jsfiddle 示例中看到，按钮文本位于其自己的行中。如果可能的话，我可以使用锚点，但希望避免额外的 js。

HTML：

<span>blah </span> <button type="submit">blaajsdkla blaajsdklajsdkla bla ajsdklajsdkla blaajsdkla sdlaskjdas djakldaldasdjaskj aj as blaajsdkla blaajsdkla sdlaskjdas djakldaldasdjaskj aj as</button> <span>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span>

CSS：

button{
    border: none;
    white-space: normal;
    display:inline-block;
    font: inherit;
    margin: 0;
    padding: 0;
    outline: none;
    outline-offset: 0;
    color: blue;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    background:transparent;
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height:normal;
}

jsfiddle 代码 https://jsfiddle.net/zapjelly/30ta6ofm/4/

Currently looks like and what it should look like

【问题讨论】：

请澄清您的问题。
嗨@MayankNimje - 抱歉我的问题不清楚。更新了措辞，并附上了我想要实现的目标的屏幕截图。谢谢！
这是一个有趣的问题，但是 js 中的几行代码比任何 css hacks 和技巧更有效地解决问题，即使它们完全有可能，在这种情况下（恕我直言）。 :)
嗨@nevermind - 你是完全正确的:) 但我认为那里的人可能知道一种方法。
Button display inline CSS的可能重复

标签： html css forms button

【解决方案1】：

无法像内联元素一样呈现按钮。见

https://www.w3.org/TR/html5/rendering.html#the-button-element-0

按钮总是渲染为内联块或块

【讨论】：

【解决方案2】：

使用输入提交类型，将其包装在标签中，然后提供输入display:none。尽管提交是隐藏的，但标签将充当提交按钮，因为它的for 属性将其自身绑定到提交。标签是一个内联元素。 FIDDLE

片段

* {
  margin: 0;
  padding: 0;
}
#dual {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  max-width: 97vw;
  border: none;
  max-height: 50px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%)repeat;
}
#dual * {
  border: none;
  display: table-row;
  font: inherit;
  outline: none;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  line-height: 1;
  font-variant: small-caps;
  letter-spacing: .3px;
  word-spacing: 2px;
  white-space: pre-line;
}
#sub1 {
  display: none;
}
label {
  text-align: justify;
  text-decoration: underline;
  color: #923;
  box-shadow: -8px 8px 10px 3px rgba(0, 0, 0, 0.7);
}

<form id='dual' name='dual'>
  <label for='sub1'>
    <input id='sub1' type='submit' value=''>Blaajsdkla blaajsdklajsdkla blaajsdklajsdkla blaajsdkla sdlaskjdas Djakldaldasdjaskj Aj as blaajsdkla bBaajsdkla Ssdlaskjdas djakldaldasdjaskj aJ as Blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah</label>
</form>

【讨论】：

嗨@zer00ne - 你的回答根本没有解决我的问题，但谢谢。我希望提交按钮文本不要与段落的其余部分分开。我可以使用锚点来做到这一点，但按钮 type="submit" 的语义更好，所以我正在尝试解决这个问题。
在那个长度上，你要么看到它隐藏在视口右侧的一半，要么是一个高大的元素。你只描述了你正在寻找的东西，但没有描述结果会是什么样子。尺寸是多少？部分隐藏可以吗？你想让文本换行吗？它是否必须是 2 个元素，因为使用一个会很简单。
更新涉及标签和输入注释，下划线显示没有换行符，布局符合语义和规范。
嗨@zer00ne - 感谢您回来并添加另一条评论。我附上的屏幕截图可能会让按钮看起来更清晰。

【解决方案3】：

一种可行的方法是在按钮中使用display: contents，以使container 看起来不存在，将按钮的文本呈现在span 文本正在呈现的同一行上。

https://jsfiddle.net/5znfhoav/

【讨论】：