float:left 的元素失真

Question

所以我在这里要做的只是将边栏和 table 图像对齐在同一行上。

问题是不是对齐，这里主要问题是输入CSS命令后：

 float: left;

侧边栏背景变窄，背景色没有完全覆盖文字。

CSS 的侧边栏从 CSS 代码的第一行开始，而 CSS 的 table 图像在最后一行。

非常感谢您的帮助！

/* sidebar menu */
#product_menu {
 position: relative;
 left: 8%;
 float: left;
}

ul {
 list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
}

li {
 padding: 15px 20px;
 border-bottom: 2px black;
}

.droplist {
 font-family: Arial; 
 font-size: 14px; 
 background-color: #7bc2eb;
 border: none;
 cursor: pointer;
}

.dropdown {
 position: relative;
 /*display: inline-block;*/
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .droplist {
    background-color: #68a3c5;}

/* list of images*/
#main {
 position: relative;
 left: 25%;
}

  <aside id="product_menu">
   <ul>
    <li style="font-size: 24px; font-weight: bold; background-color: #68a4c7;">Products</li>
    <div class="dropdown">
    <li class="droplist">M8</li>
     <div class="dropdown-content">
         <a href="productwebpages/series/product_series.html">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">M12</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Mini</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
    <div class="dropdown">
    <li class="droplist">Standard</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Middle</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Large</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Quick</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
   </ul>
  </aside>

  
  <section id="main">
   <table id="product_table">
    <tr>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
    </tr>
    <tr>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
    </tr>
        </table>
  </section>

Answer 1

您已将 width:10% 定义为 ul 即限制 ul 选择背景颜色

/* sidebar menu */
#product_menu {
 position: relative;
 left: 8%;
 float: left;
}

ul {
 list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
 padding: 15px 20px;
 border-bottom: 2px black;
}

.droplist {
 font-family: Arial; 
 font-size: 14px; 
 background-color: #7bc2eb;
 border: none;
 cursor: pointer;
}

.dropdown {
 position: relative;
 /*display: inline-block;*/
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .droplist {
    background-color: #68a3c5;}

/* list of images*/
#main {
 position: relative;
 left: 25%;
}

  <aside id="product_menu">
   <ul>
    <li style="font-size: 24px; font-weight: bold; background-color: #68a4c7;">Products</li>
    <div class="dropdown">
    <li class="droplist">M8</li>
     <div class="dropdown-content">
         <a href="productwebpages/series/product_series.html">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">M12</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Mini</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
    <div class="dropdown">
    <li class="droplist">Standard</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Middle</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Large</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Quick</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
   </ul>
  </aside>

  
  <section id="main">
   <table id="product_table">
    <tr>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
    </tr>
    <tr>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
    </tr>
        </table>
  </section>

Answer 2

您需要删除 ul 宽度或将宽度设置为 100%。

/* sidebar menu */
#product_menu {
 position: relative;
 left: 8%;
 float: left;
}

ul {
 list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

li {
 padding: 15px 20px;
 border-bottom: 2px black;
}

.droplist {
 font-family: Arial; 
 font-size: 14px; 
 background-color: #7bc2eb;
 border: none;
 cursor: pointer;
}

.dropdown {
 position: relative;
 /*display: inline-block;*/
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .droplist {
    background-color: #68a3c5;}

/* list of images*/
#main {
 position: relative;
 left: 25%;
}

  <aside id="product_menu">
   <ul>
    <li style="font-size: 24px; font-weight: bold; background-color: #68a4c7;">Products</li>
    <div class="dropdown">
    <li class="droplist">M8</li>
     <div class="dropdown-content">
         <a href="productwebpages/series/product_series.html">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">M12</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Mini</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
    <div class="dropdown">
    <li class="droplist">Standard</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Middle</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Large</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
      <div class="dropdown">
    <li class="droplist">Quick</li>
     <div class="dropdown-content">
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
         <a href="">Phasellus porttitor</a>
       </div>
      </div>
   </ul>
  </aside>

  
  <section id="main">
   <table id="product_table">
    <tr>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
    </tr>
    <tr>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
     <td>
      <figure>
       <img src="https://dummyimage.com/150x150/000/fff.jpg&text=image" alt="Image" width="150" height="150">
         <figcaption>Lorem Ipsum</figcaption>
      </figure>
     </td>
    </tr>
        </table>
  </section>

float:left 的元素失真

Element distortion with float:left

html

css

css-float