【问题标题】:How to prevent row resizing after enter data如何防止输入数据后调整行大小
【发布时间】:2021-10-26 00:12:54
【问题描述】:

我正在创建一个井字游戏。在初始状态下,我在任何按钮中都没有数据。但无论何时输入任何数据。板行调整大小,如果我单击所有按钮,它们会处于正常位置。

这里我没有提供所有代码。只提供主要问题部分。我怎样才能解决它们将始终保持相同位置的问题,尽管它们有任何价值或有任何价值。

.board {
    
}
.board button{
    width: 20px;
    height: 20px;
    padding: 20px;
    border: 1px solid #2d3e50;
    background-color: #34495e;
}
<div>
    <div class='board'>
      <button>X</button>
      <button></button>
      <button></button>
    </div>
    <div class='board'>
      <button></button>
      <button></button>
      <button></button>
    </div>
    <div class='board'>
      <button></button>
      <button></button>
      <button></button>
    </div>
</div>

【问题讨论】:

    标签: html css


    【解决方案1】:

    您可以尝试在容器中使用 display: flex,以便始终保持按钮居中并在一起。 Flex 总是有用的

    .board {
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .board button{
        width: 20px;
        height: 20px;
        padding: 20px;
        border: 1px solid #2d3e50;
        background-color: #34495e;
    }
    <div>
        <div class='board'>
          <button>X</button>
          <button>s</button>
          <button></button>
        </div>
        <div class='board'>
          <button>s</button>
          <button></button>
          <button></button>
        </div>
        <div class='board'>
          <button></button>
          <button></button>
          <button></button>
        </div>
    </div>

    【讨论】:

    • 谢谢...它的工作原理..其实很长一段时间我没有任何练习。谢谢一秒钟。
    • 继续工作,你做得很好!
    猜你喜欢
    • 1970-01-01
    • 2017-06-20
    • 2016-05-08
    • 2010-11-27
    • 1970-01-01
    • 2015-08-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多