小贝子编程

带有浮动的元素失真:左



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

问题是而不是对齐，这里的main问题是在输入CSS命令后：

float: left;

在侧边栏上，背景变窄，背景颜色没有完全扩展到覆盖单词。

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

非常感谢您的帮助

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

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

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

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium