Question

我之前已经问过这个问题，但我找不到任何可以帮助我的事情。我用过＆＃39; table＆＃39;和＆＃39;内联＆＃39;对齐我的输入框无济于事。我明白我使用这些错误，我只是不确定在哪里。

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;
}

原谅可怕的颜色托盘

Answer 1

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

使用css对齐输入框

1 个答案: