gpt4 book ai didi

html - 使用 HTML 和 CSS 创建的网页上的额外空间

转载 作者:行者123 更新时间:2023-11-28 02:33:37 25 4
gpt4 key购买 nike

我在页面右侧看到一个空间,位于标题下方,我似乎无法移动它。我想要右边的文本框几乎一直到右边。这是我正在学习的 HTML 类,而不是真实的地方。关于如何使类 .right 一直移动到屏幕右侧有什么建议吗?

非常感谢。

HTML

CSS
/* site.css */
body {
background-color: #D4AD6A
}

html, body {
padding: 0 auto;
margin: 0 auto;
height: 100%;
width: 100%;
}

header{
color: #256E5D;
background-color: #805815;
height: 100px;
}

footer {
text-align: center;
margin-left: 40%;
padding: 15px;
}

nav {
float: right;
margin-right: 10px
}

nav li{
display: inline;
}

td,th {
border: 1px solid black;
}

table {
border-spacing: 0px
}

.main {
font-family: times-new roman;
color: yellow;
}

.title {
color: #3B3176;
font-size: 48px;
font-family: 'Times New Roman', Times, serif;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}

.header-image {
margin-left: 20px;
margin-top: -50px;
}

ul.a {
list-style-type: none
}

.products_inline{
font-size: 36px;
color: yellow;
width: 50px;
display: inline-block;
vertical-align: top;
width: 20%;
}

a.prod_inline:link{
color: yellow;
font-size: 36px;
}

a.prod_inline:visited {
color: yellow;
font-size: 36px;
}

.inline {
display: inline-block;
text-align: center;
margin: auto;
width: 60%;
/*border: 3px solid black;*/
}

.right {
display: inline-block;
text-align: right;
width: 125px;
vertical-align: top;
margin-top: 15px;
border: 2px solid black;
}

.rightform {
float: right;
}
.flex{
display: flex;
}

.centerform{
display: flex;
flex-direction: column;
width: 320px;
font-family: Arial;
color: yellow;
/*border: solid black 3px;*/
}

.page_grids{
display: inline-block;
text-align: left;
}

table {
width: 700px;
margin-top: 25px;
border: solid black 1px;
border-spacing: 0px

}
<!doctype html>
<html lang="en">
<head>
<title>Uncle's Bait and Tackle Shop Rods</title>
<link rel="stylesheet" href="css/baitstyle.css">
</head>

<body>
<section class="main">
<div>
<header>
<div class="title">Uncle's bait and tackle shop</div>
<!--<div style="margin-left: 94%"><a href="about_us.html">About Us</a></div>-->
<nav>
<ul>
<li><a href="final.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
</ul>
</nav>
<img src="img/bass1.jpg" class="header-image" />
</header>
</div>
<div class="products_inline">
<ul class="a">
<li><a href="rods.html" class="prod_inline">Rods</a></li>
<li><a href="lures.html" class="prod_inline">Lures</a></li>
<li>Terminal <br>&nbsp;&nbsp;Tackle</li>
<li>Clothing</li>
</ul></div>
</div>
<div class="inline">
<table class="page_grids">
<thead>
<th colspan="2" height: 25px>[MAKE LARGER, CENTER, USE CSS]Rods</th>
<tr><td>Spinning Image</td><td>Our large selection of spinning rods</td></tr>
<tr><td>Spin Casting Image</td><td>Our selection of spin casting rods are perfect

for the novice angler and masters alike</td></tr>
<tr><td>Baitcasting Image</td><td>Our selection of baitcasters are perfect for

those that need precision casting</td></tr>
<tr><td>Specialty Rods Image</td><td>Our selection of specialty rods will meet

your needs for those species specific targets such as salmon or sturgeon</td></tr>
</thead>
</table>
</div>
<div class="right">Right side text will this wrap or keep going Right side text will this wrap or keep

going Right side text will this wrap or keep going </div>
</section>
</body>
</html>

最佳答案

你的标记很糟糕,但你不应该为此感到难过。我对你的 HTML 进行了一些重构,以便它可以正常运行(但它仍然看起来不太好)。

HTML:

    <header>
<div class="title">Uncle's bait and tackle shop</div>
<nav>
<ul>
<li><a href="final.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
</ul>
</nav>
<img src="img/bass1.jpg" class="header-image">
</header>

<section class="main" style="clear: both;">
<div class="products_inline">
<ul class="a">
<li><a href="rods.html" class="prod_inline">Rods</a></li>
<li><a href="lures.html" class="prod_inline">Lures</a></li>
<li>Terminal <br>&nbsp;&nbsp;Tackle</li>
<li>Clothing</li>
</ul>
</div>

<div class="inline">
<table class="page_grids">
</table>
</div>
<div class="right">
Right side text will this wrap or keep going Right side
</div>

</section>

CSS:

.main {
clear: both;
}

.right {
float: right;
}

enter image description here

关于html - 使用 HTML 和 CSS 创建的网页上的额外空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47561276/

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