html - 如何修复w3.css列表项中的高度偏移

对于我列表中的每个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/