gpt4 book ai didi

html - 菜单按钮不会移动

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

我正在尝试制作一个带有大文本的页眉,然后在其下方放置位于页面左侧的子文本,并在页面右侧制作一组用于菜单的按钮,我可以将它们移动到某个位置位置,但现在我无法移动按钮。这是我的代码:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css"/>
<script src="script.js"></script>

<style>
.button1, .button2, .button3 {display:block;}
.row {
padding: 10%;
}
.button-group {
position: relative;
float: right;
margin:-340px auto;
}

.button1 {
height: 25px;
width: 80px;
position: absolute;
top: 50px;
left: 120px;
}

.button2 {
height: 25px;
width: 80px;
z-index: 1;
float: right;
top: 50px;
left: 180px;
}

.button3 {
height: 25px;
width: 80px;
z-index: -1;
float: right;
top: 50px;
left: 20px;
}
</style>
<style>
table {
border-collapse: collapse;
width: 100%;


}
tr.border_bottom td {
border-bottom:1pt solid black;
}

th, td {
padding: 10px;
text-align: left;
border-bottom: 3px solid #ddd;
border-top: 3px solid #ddd;
}
</style>
<style>
body {
background-color: darkblue;
}
</style>
<style>
h2 {
font-size: 20px;
}

p {
font-size: 14px;
}
</style>

<style>
body {
color: white;
}

h1 {
color: white;
}

p {
color: darkgrey;
}
</style>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<style type="text/css">
a.nounderline {text-decoration: none; }
</style>
<style type="text/css">
a.nounderline {text-decoration: none; }
</style>
</head>
<body>
<div class="container">
<div style="padding-left:60px">
<h2 size="6" style="font-family:sans-serif"><b>Python Code</b>
</h2>
<p>Make use of this database of Python code to improve your current projects</p>
</div
<div class="row button-group">
<button class="btn btn-primary button2"><a
href="/movielist">BUTTON 1</button>
<button class="btn btn-primary button2"><a
href="/python_forum">BUTTON 2</button>
<button class="btn btn-primary button3">BUTTON 3</button>
</div>
</div>
<br/>
<table width="90%">
{% for x in pythonforum: %}
<tr>
<td width=20%> {{ x[2] }} </td>
<td width=20%> {{ x[1] }} </td>
</tr>
{% endfor %}
</table><br/>
</body>
</html>

我的主要目标是获得一个类似于您将在以下站点上看到的按钮组:http://www.christopherkoehler.net/blog/ .如有任何帮助,我们将不胜感激。

最佳答案

我只是用一些修复更新了你的代码。我希望它能帮助你。谢谢

body {
background-color: darkblue;
color: white;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}

a.nounderline {
text-decoration: none;
}

h2 {
font-size: 20px;
margin: 0;
}

p {
font-size: 14px;
color: darkgrey;
margin: 0;
}

table {
border-collapse: collapse;
width: 100%;
}
tr.border_bottom td {
border-bottom:1pt solid black;
}

th, td {
padding: 10px;
text-align: left;
border-bottom: 3px solid #ddd;
border-top: 3px solid #ddd;
}

.container {
display: flex;
justify-content: space-between;
padding: 10px;
}

.nav-link {
display: flex;
align-items: center;
}

.nav-link ul {
background-color: #000;
margin: 0;
padding: 0 0 3px;
list-style: none;
display: flex;
}

.nav-link li a {
color: #eee;
font-size: 10px;
text-decoration: none;
padding: 0 15px;
white-space: nowrap;
}

.nav-link li + li a {
border-left: 1px dotted #666;
}
<div class="container">
<div>
<h2 size="6" style="font-family:sans-serif"><b>Python Code</b></h2>
<p>Make use of this database of Python code to improve your current projects</p>
</div>
<div class="nav-link">
<ul>
<li><a href="/movielist">BUTTON 1</a></li>
<li><a href="/movielist">BUTTON 2</a></li>
<li><a href="/movielist">BUTTON 3</a></li>
</ul>
</div>
</div>
<br/>
<table width="90%">
{% for x in pythonforum: %}
<tr>
<td width=20%> {{ x[2] }} </td>
<td width=20%> {{ x[1] }} </td>
</tr>
{% endfor %}
</table><br/>

关于html - 菜单按钮不会移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55329435/

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