使用 css 对齐输入框答案

【问题标题】：Align input boxes using css使用 css 对齐输入框
【发布时间】：2017-04-30 19:08:50
【问题描述】：

我知道以前有人问过这个问题，但我找不到任何对我有帮助的东西。我使用'table'和'inline'来对齐我的输入框无济于事。我知道我用错了，我只是不确定在哪里。

HTML5 代码

<!DOCTYPE>
<html lang = 'en'>
<head>
    <meta charset = 'UTF-8'/>
    <script src = 'ABS.js'></script>
    <link rel = 'stylesheet' href = 'ABS.css'/>
    <h1> Adventure Booking System </h1>
    <h3> Student Name: Kyle Sharp - ID: 101604364 </h3>
</head>
<body>
<div class = 'alignline'>
    <p class = 'left'> Enter Customer Name </p><input type = 'text' id = 'custname'/> <br />
    <p class = 'left'> Enter Adventure Code </p><input type = 'text' id = 'advcode'/> <br />
    <p class = 'left'> Enter Lunch Code </p><input type = 'text' id = 'lunchcode'/> <br />
    <p class = 'left'> Enter No. of people </p><input type = 'text' id = 'nopeople'/> <br />
    <p class = 'left'> Enter Seller ID </p><input type = 'text' id = 'sellerid'/> <br />
</div>

    <button type = 'button' onclick = 'displayAdvOptions()'> Show Adventure Options and Prices </button> <br />
    <button type = 'button' onclick = 'displayLunchOptions()'> Show Lunch Options and Prices </button> <br />
    <button type = 'button' onclick 'validateAndCalc()'> Validate data and calculate total </button> <br />
    <p id = 'msg1'></p>
    <p id = 'msg2'></p>
    <p id = 'msg3'></p>
    <p id = 'msg3'></p>
</body>
</html>

CSS 代码

body {
    background-color: Yellow;
    display: table;
}

h1 {
    color: blue;
    font-family: Impact, Charcoal, sans-serif;
}

h3 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.left {
    color: purple;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
}

.alignline p{
    display: inline;
}

button {
    margin-top: 10px;
}

原谅可怕的调色板

【问题讨论】：

标签： css html alignment

【解决方案1】：

我稍微修改你的代码以使其正确对齐

body {
    background-color: Yellow;
    display: table;
}

h1 {
    color: blue;
    font-family: Impact, Charcoal, sans-serif;
}

h3 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.left {
    color: purple;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
}

.alignline p{
    display: inline;
}

button {
    margin-top: 10px;
}
.clear-float p{
  float: left;
  margin: 4px 0;
  padding-right: 15px;
}
.clear-float input{
  float: right; 
  margin: 4px 0;
}
.clear-float{
  clear: both;
}

<div class = 'alignline'>
    <div class="clear-float">
      <p class = 'left'> Enter Customer Name </p>
      <input type = 'text' id = ''/>
    </div>
    
    <div class="clear-float">
      <p class = 'left'> Enter Adventure  code </p>
      <input type = 'text' id = ''/>
    </div>
    
    <div class="clear-float">
      <p class = 'left'> Enter Lunch Code </p>
      <input type = 'text' id = ''/>
    </div>
    
    <div class="clear-float">
      <p class = 'left'> Enter Customer Name </p>
      <input type = 'text' id = ''/>
    </div>
</div>

<button type = 'button' onclick = 'displayAdvOptions()'> Show Adventure Options and Prices </button> <br />
    <button type = 'button' onclick = 'displayLunchOptions()'> Show Lunch Options and Prices </button> <br />
    <button type = 'button' onclick 'validateAndCalc()'> Validate data and calculate total </button> <br />
    <p id = 'msg1'></p>
    <p id = 'msg2'></p>
    <p id = 'msg3'></p>
    <p id = 'msg3'></p>

【讨论】：

'margin: 4px 0' 中的 0 是什么意思？以及 clear 的作用是什么？
0 in margin 表示我将左右边距设为 0
谢谢，最后一件事。当我运行整个代码（包括我的按钮）时，最靠近输入框和段落的按钮会向右移动。底部2仍然很好。我该如何解决这个问题
我使用 css float 来左右对齐项目，所以每当我们使用 float 时，我们都必须清除父级的浮动，所以两者都清晰，我强烈建议您了解更多关于 html、css 和 js 的知识如果你想在这个领域做点什么
@Ghrafkly 查看我更新的代码，对我来说看起来不错，如果上面的答案对你有用，你可以将其标记为已接受