如何使內聯塊適合整個寬度？
[英]How to make a inline-block fit whole width?
問題描述
我不會讓內聯塊填滿整個寬度。 其實我用的是amp。 我想讓所有字段都適合整個寬度。 但我無法做到。 我可以使用.important 來做到這一點。 但這是一種不好的做法嗎？ 那么我如何在不使用：important 的情況下做到這一點？ 我正在使用以下代碼：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script async custom-element="amp-autocomplete" src="https://www.cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
<script async src="https://www.cdn.ampproject.org/v0.js"></script>
<style>
.page-form {
background: url(https://mydoginsurance.com.au/images/form-bg-lg.webp) no-repeat center;
background-size: cover;
position: relative;
color: #fff;
}
.section {
padding: 63px 0;
}
.page-form .container {
position: relative;
z-index: 100;
}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.justify-content-center {
-ms-flex-pack: center;
justify-content: center;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.text-center{
text-align: center;
}
.mb-5, .my-5 {
margin-bottom: 3rem;
}
h2, .h2 {
font-size: 2.5rem;
}
.page-form .container .form-box {
padding: 0;
border: none;
background: none;
box-shadow: none;
-webkit-box-shadow: none;
}
.form-box {
background: rgba(255, 255, 255, 0.25);
border: 1px solid #eaeaea;
-webkit-box-shadow: 0 13px 29px 0 rgb(0 0 0 / 35%);
box-shadow: 0 13px 29px 0 rgb(0 0 0 / 35%);
padding: 40px;
}
.justify-content-center {
-ms-flex-pack: center;
justify-content: center;
}
.form-box .mb-4 {
position: relative;
}
.form-box .form-control {
padding: 20px 0 0 18px;
height: 54px;
border: none;
border-radius: 2px;
color: #000;
}
.form-control, input[type=text], input[type=email], input[type=tel], input[type=file], input[type=search], textarea, select {
display: block;
width: 100%;
padding: 0.6rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
</style>
</head>
<body>
<div class="page-form section" id="getquote">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="mb-5 text-center">
<h2>Submit your Dog info and we'll address your request ASAP</h2>
</div>
<div class="form-box">
<form action="https://mydoginsurance.com.au/choose-plan.html" method="GET" target="_top">
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="mb-4">
<input type="text" name="dog_name" class="form-control" aria-labelledby="label_dog_name" required>
<label id="label_dog_name" for="dog_name">Name of Dog</label>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4">
<amp-autocomplete filter="substring" min-characters="0" style="padding: 0; color: black; display: cover">
<input type="search" name="breed" class="form-control" id="tbdog" aria-labelledby="label_dog_breed" required>
<label id="label_dog_breed" for="breed">Breed of Dog</label>
<script type="application/json">
{ "items": [ "Affenpinscher", "Afghan Hound", "Airedale Terrier", "Akita" }
</script>
</amp-autocomplete>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4">
<!--<input type="number" name="age" min="1" max="8" class="form-control" required>-->
<select name="age" class="form-control" aria-labelledby="label_dog_age" required>
<option></option>
<option value="0">
< 1 </option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label id="label_dog_age" for="age">Age of Dog</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我已經托管了該站點，以便您可以仔細查看它： https://hungry-swanson-e6b32d.netlify.app/
1 個解決方案
解決方案1
1 已采納 2021-02-15 13:17:01
您可以為其添加 width: 100% （amp-autocomplete 組件）
顯示：內聯塊，最小化到一定寬度后，停止內聯塊並保持結構不變
[英]Display: inline-block, after minimizing to certain width, stop inline-block and leave structure as is
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.