Question

当我制作一个有趣的小型网站来学习有关html，css和js的一些知识时，我陷入了一点麻烦。我想将某物分为3个部分，但它们像楼梯上的台阶一样下降。抱歉，如果编码和内容混乱，我是编码新手。 HTML：

<html>
<head>
    <link rel="stylesheet" href="main.css">
    <script src="js/banana.js"></script>
</head>
<body class="outline">
    <div align="middle"><a href="/index.html"><table><td><img src="media/banana left.png" alt="" width="100px"></td><td><h1 class="title">Stupid Banana Shop</h1></td><td><img src="media/banana right.png" alt="" width="100px"></td></table></a></div> 
    <h1 style="font-size: 75px;" align="middle" class="outline">Banana</h1>
    <section class="mainSection">
    <table>
    <tr><td><table>
    <tr><td class="inandout"><a onclick="function1();"><img src="media/banana/1.png" alt="" align="left" width="75px"></a></td></tr>
    <tr><td class="inandout"><a onclick="function2();"><img src="media/banana/2.png" alt="" align="left" width="75px"></a></td></tr>
    <tr><td class="inandout"><a onclick="function3();"><img src="media/banana/3.png" alt="" align="left" width="75px"></a></td></tr>
    <tr><td class="inandout"><a onclick="function4();"><img src="media/banana/4.png" alt="" align="left" width="75px"></a></td></tr>
    </table>
</td>
    <td><img src="media/banana/1.png" alt="" width="312px" align="left" id="mainImage"></td>
</tr>
<tr>
<table align="center">
    <td>
        <h1><h1 align="middle">This is a banana. What more is there to say?<br> It's the base of everything on earth.<br><del style="font-size: 50%;" class="outline1">atleast for everything around bananas</del></h1></h1>
    </td>
</table></tr>
<tr>
<table align="right">
    <td align="right">
        <h1 align="right"><h1 align="middle">Choose how many bananas you want!</h1></h1>
        <div align="center">
        <select id="amount" style="font-size: 15px;">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
</div>
<div align="center">
<button>Buy</button>
</div>
</table>
</td>
    </tr>
</table>
    </section>
</body>
</html>

CSS（我不知道是否需要这样做，只是为了防万一）：

    text-decoration: none;
    color: black;
}

.title {
    color: yellow;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.outline {
    text-shadow: -2px -2px 0 rgb(255, 255, 255), 2px -2px 0 rgb(255, 255, 255), -2px 2px 0 rgb(255, 255, 255), 2px 2px 0 rgb(255, 255, 255);
}

.inandout {
    transition: transform 0.25s;
}

.inandout:hover {
    transform: scale(0.9);
}

.mainSection {
    background-color: rgba(255, 255, 255, 50%);
}

.img {
    background-color: white;
}
.outline1 {
    text-shadow: -0.5px -0.5px 0 rgb(255, 255, 255), 0.5px -0.5px 0 rgb(255, 255, 255), -0.5px 0.5px 0 rgb(255, 255, 255), 0.5px 0.5px 0 rgb(255, 255, 255);
}

Answer 1

您似乎正在使用表以及表内部的表。我会考虑使用和网格系统。但是，对于我认为您要实现的目标，一个简单的解决方案是用以下内容替换您的最后一张桌子（用“您要购买多少个香蕉”）：

  <div style="text-align:center;">
  <span class="formquestion">Choose how many bananas you want!</></span>
  <select id="amount" style="font-size: 15px;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <button>Buy</button>
  </div>

工作示例：https://codepen.io/fraggley/pen/LYpdvJg

Answer 2

似乎您的表格是右对齐而不是居中对齐。

尝试一下：

<table align="center">
    <td align="center">
        <h1 align="center"><h1 align="center">Choose how many bananas you want!</h1></h1>
        <div align="center">
        <select id="amount" style="font-size: 15px;">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
</div>
<div align="center">

我在这里插入了您所拥有的东西，似乎使所有内容居中。

https://jsfiddle.net/sbz7fxdg/1/

如何将所有项目彼此对齐？

2 个答案: