這是你剛剛幫我修改的代碼,我還需要繼續修改,我需要將H2標簽的文字放在IMG圖標的右邊,并且需要在一排上,不要換行
时间: 2024-03-23 15:42:59 浏览: 21
好的,您可以将HTML代码修改如下:
```
<div id="menu">
<div class="logo-container">
<div class="img-container">
<img src="images/ivpd.png" alt="logo">
</div>
<h2>BL製造管理系統</h2>
</div>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/">登记数据</a></li>
<li><a href="/history">查询数据</a></li>
<li><a href="/chart">查询图表</a></li>
</ul>
</div>
```
然后将CSS代码修改如下:
```
#menu {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: #fff;
font-size: 16px;
display: flex;
flex-direction: column;
}
.logo-container {
display: flex;
align-items: center;
padding: 20px;
}
.img-container img {
max-width: 100%;
height: auto;
max-height: 50px;
}
h2 {
margin: 0;
padding-left: 10px;
font-size: 20px;
margin-left: 10px; /* 添加这一行,设置左边距 */
}
ul {
list-style-type: none;
margin: 20px 0 0 0;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
}
a:hover {
background-color: #555;
}
```
这样就可以实现您的需求了。