对于我列表中的每个 div,高度大约低一行。在这里查看问题:https://weather-software.com/weather-websites.html
我尝试了不同的样式标签并从头开始。
<!-- First Grid -->
<div class="w3-container w3-row-padding">
<input class="w3-input w3-border w3-padding" type="text" placeholder="Search for website names here..." id="myInput" onkeyup="myFunction()">
<ul class="w3-ul w3-margin-top" id="myUL">
<li>
<a href="https://weather.gov">
<div class="w3-third w3-col w3-container">
<img src="background_1.png" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>NOAA NWS Weather.gov</b></p>
<p>The NWS Mission: Provide weather, water, and climate data, forecasts and warnings
for the protection of life and property and enhancement of the national economy.</p>
</div>
</div>
</a>
</li>
<!--The list element is repeated three times-->
</ul>
</div>
我希望所有元素都是水平的。相反,他们为每个 div 降低了一行。
最佳答案
“问题”在这里:
.w3-ul li {
padding: 8px 16px;
border-bottom: 1px solid #ddd;
看看 W3.CSS 的例子,你会明白这背后的想法(这不是你想要的)。
我想您必须尝试使用类似 W3.CSS Grid 示例的东西:
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
你好!
关于html - 如何修复 w3.css 列表项中的高度偏移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57438409/