gpt4 book ai didi

css - 使用 css 对齐输入框

转载 作者:太空宇宙 更新时间:2023-11-04 08:47:05 24 4
gpt4 key购买 nike

我知道以前有人问过这个问题,但我找不到任何帮助我的东西。我使用“表格”和“内联”来对齐我的输入框无济于事。我知道我用错了这些,只是不确定在哪里。

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

原谅可怕的调色板

最佳答案

我稍微修改一下你的代码,让它正确对齐

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>

关于css - 使用 css 对齐输入框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43705178/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com