HTML导航栏右侧<a>标签如何设置多个inline style样式？

HTML元素不能同时存在多个style属性，这是你之前尝试失败的核心原因。所有行内样式规则必须写在同一个style属性里，不同样式声明之间用分号;分隔即可。

错误写法（无效） #

<a href="#about" style="float:right" style="background-color:#04AA6D">About</a>

正确写法（有效） #

<a href="#about" style="float: right; background-color: #04AA6D;">About</a>

每个样式遵循「属性名: 属性值」的格式，用分号隔开即可，最后一个分号可以省略，但加上能让后续添加新样式更方便。

补充建议（最佳实践） #

如果导航栏还有其他需要统一样式的按钮，更推荐用内部/外部CSS替代行内样式，便于后续维护：

先给导航按钮统一加类名，再通过CSS控制样式：

/* 通用导航按钮样式 */
.nav-btn {
  background-color: #04AA6D;
  /* 可添加padding、color等其他通用样式 */
}

/* 右侧浮动按钮的单独样式 */
.nav-btn.float-right {
  float: right;
}

对应的HTML代码：

<a href="#home" class="nav-btn">Home</a>
<a href="#about" class="nav-btn float-right">About</a>

这样后续修改样式时不用逐个调整HTML元素，效率更高。

内容的提问来源于stack exchange，提问作者Seb