HTML按钮位于文本下方且尺寸过大的问题求助

嘿，我来帮你搞定这两个问题！从你的代码和截图来看，问题主要出在布局结构不规范和按钮样式缺失这两方面，咱们一步步来修复：

问题根源分析 #

1. 布局混乱：你用到了Bootstrap的col-lg-2类，但没有遵循Bootstrap栅格的正确嵌套规则（.container → .row → .col），导致label和input、按钮的排列失去控制，按钮自然就跑到文本下方了。
2. 按钮尺寸失控：你只给按钮设置了背景图，但没有指定固定的宽高，按钮会默认使用背景图的原始尺寸，所以看起来特别大。

具体修复方案 #

1. 规范Bootstrap布局结构 #

把表单元素放到Bootstrap的栅格系统里，用.row包裹每一组label和input，确保它们横向排列。

2. 给按钮添加必要样式 #

指定按钮的宽高、去掉默认边框内边距、优化背景图显示，让按钮尺寸合适且样式正常。

修改后的完整代码 #

<div class="container">
  <!-- 顶部按钮 -->
  <button onclick="IndexButton()" style="width: 80px; height: 30px; background: url(images/viewmessages.png) no-repeat center center; background-size: contain; border: none; cursor: pointer;"></button>
  
  <h1>Post a Message</h1>

  <!-- 消息输入组 -->
  <div class="row">
    <label for="mes" class="col-lg-2 control-label">Message</label>
    <div class="col-lg-10">
      <input id="MessageBox" type="text" class="form-control">
    </div>
  </div>

  <!-- 姓名输入组 -->
  <div class="row">
    <label for="name" class="col-lg-2 control-label">Name</label>
    <div class="col-lg-10">
      <input id="name" type="text" class="form-control">
    </div>
  </div>

  <!-- 提交按钮 -->
  <button id="button" onclick="setMessage()" style="width: 80px; height: 30px; background: url(images/submit.png) no-repeat center center; background-size: contain; border: none; cursor: pointer;"></button>

  <!-- 地址输入组 -->
  <div class="row">
    <label for="add" class="col-lg-2 control-label">Address</label>
    <div class="col-lg-10">
      <input id="add" class="form-control">
    </div>
  </div>

  <!-- 密码输入组 -->
  <div class="row">
    <label for="pass" class="col-lg-2 control-label">Password</label>
    <div class="col-lg-10">
      <input id="pass" type="password" class="form-control">
    </div>
  </div>

  <p id="status"></p>

  <!-- 解锁按钮 -->
  <button id="unlock" onclick="ButtonPress()" style="width: 80px; height: 30px; background: url(images/unlock.png) no-repeat center center; background-size: contain; border: none; cursor: pointer;"></button>
</div>

关键修改说明 #

• 给每个label+input组合添加了.row和对应的.col-lg-10容器，让表单元素横向对齐，不会乱跳位置；
• 给所有按钮添加了固定的width和height（你可以根据实际背景图尺寸调整数值）；
• 加上了background-size: contain让背景图自适应按钮尺寸，no-repeat center center让背景图居中显示；
• 去掉了按钮默认的border和内边距，添加了cursor: pointer让鼠标悬停时显示手型，提升交互感；
• 给input加上了form-control类，让它符合Bootstrap的表单样式，和label更好地对齐。

试试看这个修改后的代码，应该就能解决布局错位和按钮过大的问题啦！

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