使用css对齐输入框 [英] Align input boxes using css
本文介绍了使用css对齐输入框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我知道之前已经问过这个问题，但我找不到任何可以帮助我的事情。我使用'table'和'inline'来对齐我的输入框无济于事。我知道我使用这些错误，我只是不确定在哪里。
I know this question has been asked before, but I can't find anything that helps me. I have used 'table' and 'inline' to align my input boxes to no avail. I understand that I am using these wrong, I am just not sure where.
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;
}
原谅可怕的颜色托盘
推荐答案
我改变你的代码以使其正确对齐
I change you code a bit to make it align properly
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对齐输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
