问题描述
对于较旧的版本，我毫不费力地覆盖Clarity Design表单控件的默认CSS行为以使用100％的父宽度。
在4.0版本中，我什至无法在Chrome Inspector上为<div class="titleBox">
<h1>Sujal Dantluri</h1>
<!-- Box at the top of the page !-->
</div>
<div class="bio">
<h2 style=color:white;text-align:center>Personal Background</h2>
<!-- personal info in unordered list !-->
<img src="graduation.jpg" alt="Image Couldn't be loaded; try again" height="175" width="225" class="gradPic">
<!-- creates a class for the image so it can be centered !-->
<ul>
<li>18 years old</li><br>
<li>Majoring in Computer Science</li><br>
<li>Interested in Technology,Animals,and cybersecurity</li><br>
<li>Hobbies include an unhealthy amount of gaming and napping</li><br>
<li>From Illinois</li><br>
<li>Fun Fact: I have a twin sister.</li><br>
</ul>
</div>
<div class="movies">
<h2 style=color:white;text-align:center>Favorite Movies</h2>
</div>
<div class="books">
<h2 style=color:white;text-align:center>Favorite Books</h2>
</div>
<div class="sites">
<h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2>
</div>和所有子元素（style="width: 100%"，clr-input-container，clr-control-container设置clr-input-wrapper ）。
有人幸运地尝试使Clarity Design 4.0的输入元素适合100％的宽度吗？
解决方法
您可以使用clr-*类在输入上应用样式。例如，
.clr-input,.clr-input-wrapper {
max-width: 100%;
width: 100%;
}
.clr-control-container,.clr-input-wrapper.clr-input {
padding-left: 0;
padding-right: 0;
}
看看这个stackblitz。