Html 制作按钮类型=提交外观并像锚一样包装

我有一个表单上的提交按钮，我想样式和行为像一个锚。我曾尝试在css中这样做，但您可以在我的JSFIDLE示例中看到，按钮文本位于自己的行中。我可以使用锚，但如果可能的话，我希望避免额外的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>

代码的中间部分

---

使用输入提交类型，将其包装在标签中，然后将输入显示为：无。尽管submit是隐藏的，但标签将充当submit按钮，因为它的

属性将自身绑定到submit。标签是一个内联元素

一小条

*{
保证金：0；
填充：0；
}
#双重的{
显示：表格；
表布局：固定；
边界塌陷：塌陷；
溢出：隐藏；
最大宽度：97vw；
边界：无；
最大高度：50px；
背景：线性梯度（至底部，rgba（0,0,0,0.65）0%，rgba（0,0,0,0）100%）重复；
}
#双重*{
边界：无；
显示：表格行；
字体：继承；
大纲：无；
光标：指针；
背景：透明；
-webkit外观：无；
线高：1；
字体变体：小大写字母；
字母间距：.3px；
字距：2px；
空白：行前；
}
#sub1{
显示：无；
}
标签{
文本对齐：对齐；
文字装饰：下划线；
颜色：#923；
盒影：-8px 8px 10px 3px rgba（0,0,0,0.7）；
}

Blaajsdkla Blaajsdkla Blaajsdkla Blaajsdkla Blaajsdkla Sdajsdkla Sdajsdkla Blaajsdkla Sdajsdkla Blaajsdkla Blaajsdkla Sdajsdkla Blaajsdkla Sdajsdkla Sdajsdkla Sdajsdkla Sdajsdkla Sdajsdkla Djajsdkla Sdajsdkla Sdajsdkla Sdajsdkla Sdajsdkla Sdajsdkla Sdajsdkla Sdajsdkla Sdajsdkla Sdajsdkla Sdajsdkla Sdajsdkl
无法将按钮呈现为内联元素。看


按钮始终呈现为内联块或块
一种可行的方法是在按钮中使用
显示：内容
，使其看起来
容器
不在那里，将按钮文本呈现在
span
文本呈现的同一行上

请澄清您的问题。嗨@MayankNimje-对不起，我的问题不清楚。更新了措辞，并附上了我想要实现的目标的截图。谢谢这是一个有趣的问题，但js中很少有行代码比任何css破解和技巧更有效地解决问题，即使它们在本例中是可能的（IMHO）。）你好@nevermind-你完全正确：）但我想有人可能知道一个方法。可能是Hi@zer00ne的重复-你的回答根本没有解决我的问题，但谢谢。我希望提交按钮文本不要与段落的其余部分隔行。我可以使用锚点来实现这一点，但是button type=“submit”的语义更好，所以我正在尝试解决这个问题。在这个长度上，您可以看到它隐藏在视口右侧的中间，也可以看到一个高的元素。你只描述了你在寻找什么，而没有描述结果会是什么样子。尺寸是多少？可以把它部分隐藏起来吗？要将文本换行吗？它是否必须是2个元素，因为使用一个元素会很简单。更新涉及一个标签和输入注释下划线显示没有换行，布局是语义的，并且符合规格。Hi@zer00ne-感谢回来并添加另一条评论。我附上的截图可能会让我想要的按钮看起来更清晰。
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;
}