gpt4 book ai didi

html - 无法获取 li 内联

转载 作者:行者123 更新时间:2023-11-28 11:43:16 24 4
gpt4 key购买 nike

我正在尝试制作水平导航菜单。我想获取 Logo ,然后获取菜单的各个部分,但内联不起作用。

我想要文本上方的图像,所以我使用了一个表格来获取它,但这破坏了内联效果。如果有任何帮助,我将不胜感激

<html>
<head>
<meta charset="utf-8">
<title>TechSocket</title>

<style>
html, body {
width: 100%;
height: 90%;
}
body {
background-color: #000;
}
#nav {
display: inline;
background-color: #CF6;
position: fixed;
padding: 1%;
width: 97%;
}
ul {
diplay: inline;
list-style-type: none;
margin: 0;
padding: 0%;
}
#nav li {
display: inline;
}
#logo {
padding-left: 0%;
}
table {
border-spacing: 25px;
}
</style>
<script>
</script>
</head>

<body>
<div id="nav">
<ul>
<li><a id="headIMG" href="#"><img id="logo" src="100-Beanie-Drive-Logo-250.jpg" width="250" height="100"/></a><li>
<li>
<table>
<tr>
<td><a href="#" class="text"><img id="text1"src="mouse.png" width="50" height="50"/></a></td>
<td><a href="#" class="text"><img id="text2" src="cam.png" width="50" height="50"/></a></td>
<td><a href="#" class="text"><img id="text3"src="cloud.png" width="50" height="50"/></a></td>
<td><a href="#" class="text"><img id="text4"src="clock.png" width="50" height="50"/></a></td>
</tr>
<tr>
<td>Mouse</td>
<td>Camera</td>
<td>Cloud</td>
<td>Clock</td>
</tr>
</li>
</ul>
</div>
<div id="main">
</div>
</body>
</html>

最佳答案

尝试将其向左浮动,如下所示:

#nav li {
float: left;
}

关于html - 无法获取 li 内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20588962/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com