gpt4 book ai didi

html - 在 css html 表单中对齐文本字段

转载 作者:可可西里 更新时间:2023-11-01 13:49:40 24 4
gpt4 key购买 nike

我正在尝试使网站表单看起来像这样 right side of text fields are aligned

当我更改屏幕大小时,文本字段不再对齐。无论屏幕尺寸如何,我怎样才能使它们对齐?

这是我的代码:

<head>

<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<title>Coat Request Form</title>

</head>

<body>

<form target="_top" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

<p>
<input type=hidden name="oid" value="00Di0000000gO95">
<input type=hidden name="retURL" value="http://www.empowermentplan.org/#!thank-you/jiwpq">

<span style="display:inline-block" margin-right="30px">
<label class="required" for="first_name" style="display:block">First Name</label>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" required /><br>
</span>

<span style="display:inline-block">
<label class="required" for="last_name" style="display:block">Last Name</label>
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" required /><br>
</span>
<br>
<span style="display:inline-block">
<label class="required" for="email" style="display:block" >Email</label>
<input id="email" maxlength="80" name="email" size="20" type="text" required/><br>
</span>

<span style="display:inline-block">
<label for="phone" style="display:block" >Phone</label>
<input id="phone" maxlength="40" name="phone" size="20" type="text" /><br>
</span>

<br>

<span style="display:inline-block">
<label for="company" style="display:block">Company (optional)</label>
<input id="company" maxlength="40" name="company" size="20" type="text" /><br>
</span>

<span style="display:inline-block">

<label style="display:block">How many coats?</label>
<input id="00Ni000000H0CxE" name="00Ni000000H0CxE" size="20" type="text" /><br>

</span>


<label style="display:block">Who are the coats for?</label>
<textarea id="00Ni000000H0Cy2" name="00Ni000000H0Cy2" rows="3" type="text" wrap="soft"></textarea><br>
<input type="submit" name="submit" class="btn">

<select style="visibility:hidden" id="00Ni000000H0Cxx" name="00Ni000000H0Cxx" title="Topic">
<option type="hidden" value="Coats">Coats</option> </select><br>
</p>
</form>
</body>

最佳答案

您可以为此目的使用 Bootstrap 。使用引导样式表。由于 bootstrap 提供响应式网页设计,因此您的设计将根据屏幕尺寸自动对齐。将字段括在行中。然后通过添加类“col-md-6”来制作两列,问题将得到解决。有关如何使用 Bootstrap 的更多详细信息,请访问 this link.

关于html - 在 css html 表单中对齐文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36726367/

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