如何解决要素的一致性和响应性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Hello Bulma!</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css"
/>
</head>
<style>
input,label{
display: block;
}
#drive_access{
margin-left: 270px;
}
#submit{
margin-left: 600px;
}
</style>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-narrow">
<label for="name">Name</label>
<input type="text" placeholder="Enter First Name" id="name" class="input is-info"/>
</div>
<div class="column is-narrow">
<label for="last_name">Last Name</label>
<input type="text" placeholder="Enter Last Name" id="last_name" class="input is-info"/>
</div>
<div class="column is-narrow">
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" id="email" class="input is-info"/>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-narrow">
<label for="contact_number">Contact number</label>
<input type="tel" placeholder="Enter contact number" id="contact_number" class="input is-info"/>
</div>
<div class="column is-narrow">
<label>Department</label>
<p class="control">
<span class="select is-info">
<select>
<option value=""> Please choose department</option>
<option value="Administration">Administration</option>
<option value="Electronics">Electronics</option>
<option value="IT Department">IT Department</option>
<option value="">Library</option>
<option value="Mechanical">Mechanical</option>
</select>
</span>
</p>
</div>
<div class="column">
<label for="employment_type">Employment type</label>
<p class="control">
<span class="select is-info">
<select>
<option value="">Choose employment types</option>
<option value="Contract">Contract</option>
<option value="Internship">Internship</option>
<option value="Permanent">Permanent</option>
</select>
</span>
</p>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-narrow">
<label for="preferred_username">Preferred username</label>
<input type="text" id="preferred_username" class="input is-narrow is-info" placeholder="Enter preferred username"/>
</div>
<div class="column is-one-fifth">
<label for="starting_date">Starting date</label>
<input type="date" id="starting_date" class="input is-narrow is-info"/>
</div>
<div class="column is-one-fifth">
<label for="ending_date" id="end_date_label">Ending date</label>
<input type="date" id="ending_date" class="input is-info"/>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-two-fifths">
<label for="affiliation">Affiliation</label>
<p>
<span class="select is-info">
<select>
<option value="">Select employee affiliation</option>
<option value="Rookie">Rookie</option>
<option value="Veteran">Veteran</option>
</select>
</span>
</p>
</div>
<div class="column is-two-fifths">
<label for="computation_device">Computation device</label>
<p class="control">
<span class="select is-info">
<select>
<option value="">Select computation device</option>
<option value="Laptop">Laptop</option>
<option value="Desktop">Desktop</option>
</select>
</span>
</p>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-one-fifth">
<label for="mailing_list">Mailing list</label>
<p class="control">
<textarea rows="4" cols="15" placeholder="Enter names of mailing lists user needs to be added on" id="mailing_list"
class="textarea is-info"></textarea>
</p>
</div>
<div class="column is-one-fifth" id="drive_access">
<label for="drive_access">Specify shared drive access</label>
<p class="control">
<textarea rows="4" cols="15" placeholder="specify shared drive access names here"
id="mailing_list" class="textarea is-info" ></textarea>
</p>
</div>
</div>
</div>
<div class="columns">
<div class="column is-pulled-right">
<button class="button is-primary" id="submit">Submit</button>
</div>
</div>
</div>
</section>
我的问题是屏幕变化时UI不能很好地响应。例如,如果打开了“开发人员工具”选项卡,并将其向左拉伸,则这些元素就会浮动。第二个问题是我要使元素的边缘对齐。我尝试研究布尔玛课程以解决此问题,但没有运气。请帮忙
解决方法
.section{
display: flex;
flex-direction: column;
align-items: center;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。