<a> tag smaller than children

Question

I'm trying to make a simple rich text editor and had problems with toolbar buttons. What I'm trying to achieve is something like this: ，但按钮之间有非常奇怪的蓝色下划线。 （铬）你能帮助我吗？

＆＃13;

＆＃13;

#buttons svg {
  height: 24px;
  width: 24px;
  display: inline;
}

#buttons svg path {
  fill: #FFFFFF;
  margin: 0;
  padding: 0;
}

#buttons a {
  height: 100%;
}

body div {
  position: absolute;
  display: inline;
}

#toolbar {
  width: 25%;
  z-index: 9;
  height: 100%;
  right: 0;
  box-shadow: 0 0 13px;
  box-sizing: border-box;
  padding: 0 3rem 0 3rem;
  background: dodgerblue;
}

＆＃13;

<div id="toolbar">
  <span id="buttons">
        <a title="New" onclick="app.new()" href="#">
            <svg>
                <path fill="#000000" d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" ></path>
            </svg>
        </a>
        <a title="Save" onclick="app.save()" href="#">
            <svg>
                <path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"></path>
            </svg>
        </a>
        <a title="Open" onclick="app.open()" href="#">
            <svg>
                <path fill="#000000" d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" ></path>
            </svg>
        </a>
    </span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在这种情况下，您可能希望使用<button>而不是<a>，因为您没有导航到新的网址。

了解详情：Links vs. Buttons in Modern Web Applications

要重置默认按钮样式，您可以添加以下CSS：

button {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background: none;
}

Answer 2

将其添加到样式表中：

a {
    text-decoration: none;
}

Answer 3

它来自包含text-decoration的属性<a>的默认用户代理样式表，您可以使用Chrome devtools进行检查。

您可以通过执行..

删除它

#buttons a {
  text-decoration: none;
}

段：

#buttons svg {
  height: 24px;
  width: 24px;
  display: inline;
}

#buttons svg path {
  fill: #FFFFFF;
  margin: 0;
  padding: 0;
}

#buttons a {
  height: 100%;
}

body div {
  position: absolute;
  display: inline;
}

#toolbar {
  width: 25%;
  z-index: 9;
  height: 100%;
  right: 0;
  box-shadow: 0 0 13px;
  box-sizing: border-box;
  padding: 0 3rem 0 3rem;
  background: dodgerblue;
}

<div id="toolbar">
  <span id="buttons">
        <a title="New" onclick="app.new()" href="#">
            <svg>
                <path fill="#000000" d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" ></path>
            </svg>
        </a>
        <a title="Save" onclick="app.save()" href="#">
            <svg>
                <path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"></path>
            </svg>
        </a>
        <a title="Open" onclick="app.open()" href="#">
            <svg>
                <path fill="#000000" d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" ></path>
            </svg>
        </a>
    </span>
</div>

文档：text-decoration - CSS: Cascading Style Sheets | MDN

Answer 4

只需将var client = Bus.CreateRequestClient<RegisterMember>(); var request = client.Create(new RegisterMember() {MemberId = "Johnny5"}); // the request is also the send pipe configurator, so... request.UseExecute(context => context.CorrelationId = someId); var (registered, existing) = await request.GetResponse<MemberRegistered, ExistingMemberFound>(); 添加到text-decoration: none;选择器

即可

＆＃13;

＆＃13;

#button a { }

＆＃13;

#buttons svg {
  height: 24px;
  width: 24px;
  display: inline;
}

#buttons svg path {
  fill: #FFFFFF;
  margin: 0;
  padding: 0;
}

#buttons a {
  height: 100%;
  text-decoration: none;
}

body div {
  position: absolute;
  display: inline;
}

#toolbar {
  width: 25%;
  z-index: 9;
  height: 100%;
  right: 0;
  box-shadow: 0 0 13px;
  box-sizing: border-box;
  padding: 0 3rem 0 3rem;
  background: dodgerblue;
}

＆＃13;

＆＃13;

＆＃13;

Answer 5

尝试使用：

text-decoration: none;