如何在投票按钮下方定位投票计数？答案

【问题标题】：How to position vote count underneath vote button?如何在投票按钮下方定位投票计数？
【发布时间】：2019-09-19 18:45:59
【问题描述】：

我是一名尝试创建音乐艺术家投票页面的初学者。我对将投票计数文本放置在投票按钮下方感到困惑。如果我的代码还有什么可以改进的，请告诉我。

我尝试了不同的花车和显示器，但我不确定自己在做什么。

p {
  color: black;
  padding: 5px 0 5px 5px;
}

h3 {
  padding: 0 0 10px 10px;
}

.bart {
  height: 200px;
  width: auto;
  float: right;
  padding: 30px 30px 0 0;
}

button {
  list-style: none;
}

td {
  display: flex;
  align-items: center;
  justify-content: center;
}

<img class="bart" src="bart.gif">
<div class="artist-list">
  <ul class="artist">
    <table>

      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="coleclick()"><li>J.Cole</li></button>
        <p>Votes: <a id="cole">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="slipknotclick()"><li>Slipknot</li></button>
        <p>Votes: <a id="slipknot">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="amineclick()"><li>Amine</li></button>
        <p>Votes: <a id="amine">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="daveClick()"><li>Dave</li></button>
        <p>Votes: <a id="dave">0</p></td>
      </ul>
        </table>

【问题讨论】：

标签： html css button text

【解决方案1】：

您可以通过使用flex-direction 属性来解决此问题。

td {
  display: flex;
  flex-direction: column;
}

请记住，当您执行此操作时，justify-content 和 align-items 将更改它们影响的轴。在这种情况下，如果您同时使用center，则没有问题。

p {
  color: black;
  padding: 5px 0 5px 5px;
}

h3 {
  padding: 0 0 10px 10px;
}

.bart {
  height: 200px;
  width: auto;
  float: right;
  padding: 30px 30px 0 0;
}

button {
  list-style: none;
}

td {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<img class="bart" src="bart.gif">
<div class="artist-list">
  <ul class="artist">
    <table>

      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="coleclick()"><li>J.Cole</li></button>
        <p>Votes: <a id="cole">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="slipknotclick()"><li>Slipknot</li></button>
        <p>Votes: <a id="slipknot">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="amineclick()"><li>Amine</li></button>
        <p>Votes: <a id="amine">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="daveClick()"><li>Dave</li></button>
        <p>Votes: <a id="dave">0</p></td>
      </ul>
        </table>

【讨论】：

非常感谢 Gerrardo，非常感谢您的帮助！我的代码中还有其他可以改进的地方吗？
@RDA28 欢迎您。我真的建议不要使用 table 进行布局，尝试查看 css 网格或只是简单有趣的 flexbox。如果你能批准和投票，我真的很感激。代码！
检查一下这个弹性框。这是一个了不起的工具steveaolsen.com/docs/FlexboxCheatsheet.pdf
@sao 这是一个很棒的备忘单，这也是一个练习 flex-boxes 的好游戏codepip.com/games/flexbox-froggy