如何实现按钮内标题左对齐、价格右对齐且价格异色？

<input>类型的按钮无法在value中实现多样式文本，建议改用<button>标签，通过内部嵌套元素来实现需求：

<button class="myClass" type="submit" name="message">
  <span style="float: left;">Title</span>
  <span style="float: right; color: #ff4444;">3$</span>
  <div style="clear: both;"></div>
</button>

关键实现说明： #

• 用<button>替代<input>，支持内部嵌套多个不同样式的元素
• 左侧标题通过float: left实现靠左对齐
• 右侧价格通过float: right实现靠右对齐，同时用color属性设置差异化颜色
• 添加clear: both的空div清除浮动，避免按钮高度塌陷

如果需要统一管理样式，可将样式提取到CSS类中：

.myClass {
  width: 140px; /* 设置固定宽度让布局更稳定 */
  padding: 4px 8px;
}
.btn-title {
  float: left;
}
.btn-price {
  float: right;
  color: #ff6600; /* 自定义价格颜色 */
}
.btn-clear {
  clear: both;
}

对应的HTML结构：

<button class="myClass" type="submit" name="message">
  <span class="btn-title">Title</span>
  <span class="btn-price">3$</span>
  <div class="btn-clear"></div>
</button>

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