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

Question

对于我列表中的每个 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 降低了一行。

Answer 1

“问题”在这里:

.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>

你好!