0
私のページの右側に移動できないヘッダーの下にスペースが表示されています。私は右側のテキストボックスをほぼすべて右に向かって欲しいと思います。これは私が取っているHTMLクラスであり、実際の場所ではありません。どのようにクラスを作るための提案。ライトは、画面の右に完全に移動？HTMLとCSSで作成されたWebページ上の余分なスペース
ありがとうございました。
HTML
CSS
/* site.css */
body {
background-color: #D4AD6A
}
html, body {
padding: 0 auto;
margin: 0 auto;
height: 100%;
width: 100%;
}
header{
\t color: #256E5D;
\t background-color: #805815;
\t 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{
\t color: yellow;
\t font-size: 36px;
}
a.prod_inline:visited {
\t color: yellow;
\t 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>
\t <title>Uncle's Bait and Tackle Shop Rods</title>
\t <link rel="stylesheet" href="css/baitstyle.css">
</head>
<body>
\t <section class="main">
\t <div>
\t \t <header>
\t \t \t <div class="title">Uncle's bait and tackle shop</div>
\t \t \t <!--<div style="margin-left: 94%"><a href="about_us.html">About Us</a></div>-->
\t \t <nav>
\t \t <ul>
\t \t <li><a href="final.html">Home</a></li>
\t \t <li><a href="about_us.html">About Us</a></li>
\t \t </ul>
\t </nav>
\t \t \t <img src="img/bass1.jpg" class="header-image" />
\t \t </header>
\t </div>
\t <div class="products_inline">
\t <ul class="a">
\t \t \t <li><a href="rods.html" class="prod_inline">Rods</a></li>
\t \t \t <li><a href="lures.html" class="prod_inline">Lures</a></li>
\t \t \t <li>Terminal <br> Tackle</li>
\t \t \t <li>Clothing</li>
\t </ul></div>
\t </div>
\t <div class="inline">
\t \t <table class="page_grids">
\t \t \t <thead>
\t \t \t \t <th colspan="2" height: 25px>[MAKE LARGER, CENTER, USE CSS]Rods</th>
\t \t \t \t <tr><td>Spinning Image</td><td>Our large selection of spinning rods</td></tr>
\t \t \t \t <tr><td>Spin Casting Image</td><td>Our selection of spin casting rods are perfect
for the novice angler and masters alike</td></tr>
\t \t \t \t <tr><td>Baitcasting Image</td><td>Our selection of baitcasters are perfect for
those that need precision casting</td></tr>
\t \t \t \t <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>
\t \t \t </thead>
\t \t </table>
\t </div>
\t <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>
\t </section>
\t </body>
</html>
、画面の右側に何かスティックを作るために、あなたは 'floatを使用することができます。しかし、仕様を読むことを確認してください。それはうんざりです！とにかく、配置の理由は、それが60％幅の別のインラインブロックの右にあるインラインブロックであるため、右のスペースはウィンドウによって異なります。ああ、画面が狭いときは、表が "インライン" divからオーバーフローし、 "right" divが表の上に表示されます。 –
ありがとうございます。それは理にかなっている。オーバーフローを許さないという提案はありますか？ – edpietrzak
確かに、[overflow]（https://developer.mozilla.org/en-US/docs/Web/CSS/overflow）プロパティ！ –