Question

<div style="float: left; width: 50%;">
    <a href="#" class="button" style="width:40%">Hello 1</a>
    <br/>
    <br/>
    <a href="#" class="button" style="width:40%">Hello 2</a>
</div>
<div style="float: right; width: 50%;">
    <a href="#" class="button" style="width:40%">Hello 3</a>
    <br/>
    <br/>
    <a href="#" class="button" style="width:40%">Hello 4</a>
</div>

我想在“Hello 3”和“Hello 4”左侧附近有“Hello 1”和“Hello 2”。如果可能，没有CSS，但只有HTML（如果需要，样式标签很好）。

Answer 1

以下是修复：

<div style="float: left; width: 50%;" align="center">
    <a href="#" class="button" style="width:40%">Hello 1</a>
    <br/>
    <br/>
    <a href="#" class="button" style="width:40%">Hello 2</a>
</div>
<div style="float: right; width: 50%;"  align="center">
    <a href="#" class="button" style="width:40%">Hello 3</a>
    <br/>
    <br/>
    <a href="#" class="button" style="width:40%">Hello 4</a>

您可以在https://codebeautify.org/htmlviewer/中查看

Answer 2

在父div上使用text-align：center -

<div style="float: left; width: 50%;text-align:center">

Answer 3

使用最小CSS（只有一种风格）并且更清晰易懂的基本解决方案。

<table style="margin: 0px auto;">
  <tr>
    <td><a href="#" class="button">Hello 1</a></td>
    <td><a href="#" class="button">Hello 3</a></td>
  </tr>
  <tr>
    <td><a href="#" class="button">Hello 2</a></td>
    <td><a href="#" class="button">Hello 4</a></td>
  </tr>
</table>

在此解决方案中，CSS部分仅用于将页面中的元素居中。

如何将此4个按钮放在此HTML页面中？

3 个答案: