Question

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

Answer 1

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

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

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

Answer 2

使用输入提交类型，将其包装在标签中，然后输入display:none。虽然隐藏了提交，但标签将作为提交按钮，因为它的for属性将自己绑定到提交。标签是内联元素。 FIDDLE

段

＆＃13;

* {
  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);
}

＆＃13;

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

＆＃13;

Answer 3

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

https://jsfiddle.net/5znfhoav/

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

3 个答案:

段