如何修复 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

"problem" 在这里：

.w3-ul li {
padding: 8px 16px;
border-bottom: 1px solid #ddd;

}

看看 W3.CSS 的例子，你会明白背后的想法（这不是你想要的）。

我猜你必须尝试类似 W3.CSS 网格的示例：

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

你好！,

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

How to fix height offset in w3.css list items

html

css

w3.css