浮动元素失真：左

时间：2017-08-31 06:52:37

标签： html css css-float

所以我想在这里做的只是将侧边栏和图像表对齐在同一条线上。

问题是不与对齐，主问题是输入CSS命令后的问题：

 float: left;
侧边栏上的

，背景变窄，背景颜色不会完全延伸以覆盖单词。

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

非常感谢您的帮助！

＆＃13;
＆＃13; 
/* 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%;
}
＆＃13; 
		<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您已将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>

答案 1 :(得分：0)

您需要删除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>

相关问题
最新问题