html – 制作一个按钮类型=提交外观并像锚一样换行

2023年2月13日 282次阅读

我在表单上有一个提交按钮,我希望它的样式和行为就像一个锚点.我曾尝试在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

最佳答案 无法像内联元素一样呈现按钮.看到

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

按钮总是呈现为内联块或块

点赞