Question

我创建了一个与顶部标签水平对齐的表单。我在对齐=按钮时遇到了一些困难，并且使用了＆nbsp技巧来对齐它。我找不到更好的解决方案，还有更好的办法吗？

我要在表单周围应用边框，并将其在页面中心对齐。我尝试了几种方法，例如将其放在表中或使用另一个div，但均未成功。到目前为止，这是我的代码（我尚未包括用于计算的脚本）：

<!DOCTYPE html>
<html>
<head>
    <title> Calculator</title>  
    <style>
        input, label{
            display:block;
        }
        label{
            text-align:center;
            margin-bottom:4px;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center">Calculator</h1>
        <form name="CL">
            <div style="float:left;margin-right:20px;">
                <label for="N1">X</label>
                <input type="text" name="N1" id="N1">
            </div>
            <div style="float:left;margin-right:20px;">         
                <label for "O">Operator</label> 
                <select type="text" name="O" id="O" style="width:50px">
                <option value="0"> +</option>
                <option value="1">-</option>
                <option value="2">*</option>
                <option value="3">/</option>
                </select>
                </div>
            <div style="float:left;margin-right:20px;">
                <label for="N2">Y</label>
                <input type="text" name="N2" id="N2">
            </div>
            <div style="float:left;">
                <label>&nbsp </label>
                <input type="button" value="=" onclick="calc()">
            </div>
            <div style="float:left;">
                <label for="R">Result</label>
                <input type="text" name="R" id="R">
            </div>
            </div>
        </form>
</body>
</html>

Answer 1

您可能要做的是给表单一个宽度，并使用margin: 0 auto将其对齐在中间并设置overflow: auto;

例如：

input, label{
    display:block;
}
label{
    text-align:center;
    margin-bottom:4px;
}
form {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #ccc;
    overflow: auto;
    padding: 5px;
}
form div {
    float: left;
    margin-right:20px;
}

<!DOCTYPE html>
<html>

<head>
  <title> Calculator</title>
  <style>
    input,
    label {
      display: block;
    }
    
    label {
      text-align: center;
      margin-bottom: 4px;
    }
    
    form {
      width: 90%;
      margin: 0 auto;
      border: 1px solid #ccc;
      overflow: auto;
      padding: 5px;
    }
    
    form div {
      float: left;
      margin-right: 20px;
    }
  </style>
</head>

<body>
  <h1 style="text-align:center">Calculator</h1>
  <form name="CL">
    <div>
      <label for="N1">X</label>
      <input type="text" name="N1" id="N1">
    </div>
    <div>
      <label for="O">Operator</label>
      <select name="O" id="O" style="width:50px">
        <option value="0"> +</option>
        <option value="1">-</option>
        <option value="2">*</option>
        <option value="3">/</option>
      </select>
    </div>
    <div>
      <label for="N2">Y</label>
      <input type="text" name="N2" id="N2">
    </div>
    <div>
      <label>&nbsp </label>
      <input type="button" value="=" onclick="calc()">
    </div>
    <div>
      <label for="R">Result</label>
      <input type="text" name="R" id="R">
    </div>
  </form>
</body>

</html>

Answer 2

您可以使用以下设置在其周围创建包装器DIV并使其成为flex容器，以实现水平和垂直居中：

html,
body {
  height: 100%;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

form {
  padding: 10px;
  border: 1px solid #ddd;
}

<!DOCTYPE html>
<html>

<head>
  <title> Calculator</title>
  <style>
    input,
    label {
      display: block;
    }
    
    label {
      text-align: center;
      margin-bottom: 4px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <h1 style="text-align:center">Calculator</h1>
    <form name="CL">
      <div style="float:left;margin-right:20px;">
        <label for="N1">X</label>
        <input type="text" name="N1" id="N1">
      </div>
      <div style="float:left;margin-right:20px;">
        <label for "O">Operator</label>
        <select type="text" name="O" id="O" style="width:50px">
          <option value="0"> +</option>
          <option value="1">-</option>
          <option value="2">*</option>
          <option value="3">/</option>
        </select>
      </div>
      <div style="float:left;margin-right:20px;">
        <label for="N2">Y</label>
        <input type="text" name="N2" id="N2">
      </div>
      <div style="float:left;">
        <label>&nbsp </label>
        <input type="button" value="=" onclick="calc()">
      </div>
      <div style="float:left;">
        <label for="R">Result</label>
        <input type="text" name="R" id="R">
      </div>
    </form>
  </div>
</body>

</html>

围绕水平样式进行样式

2 个答案: