Question

我正在使用React和Material-UI，并创建了一个小键盘。我有一个类似于此的代码段（其中KeyPadButton是来自Material-UI的RaisedButton）：

    // partially removed for brevity
    const keys = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0];

    return (
        <div>
            {keys.map(key => {
                return (
                    <KeyPadButton key={`button-${key}`}
                         value={key}
                         styles={[4, 1, 0].includes(key) ? styles.keypadButtonStyles : {}}

                    />
                )
            })}
        </div>
    );

const styles = {
    keypadButtonStyles: {
        clear: 'left',
        display: 'table',
    },
}

所以，基本上，我希望数字显示为：

7, 8, 9 4, 5, 6 1, 2, 3 0

所以，我希望数字4, 1, 0在新行中。我尝试应用clear: left和display: table，但它会将它们移到新行中，但它们在行中是独立的，而我希望例如5, 6位于4的旁边我不能使用display: block，因为它通过Material-UI打破了一些默认样式。任何想法如何实现我想要的东西？

Answer 1

带有flex-wrap: wrap;的Flexbox应该适用于所有子元素，包括RaisedButton。

工作片段（简化的JS，重要的部分是CSS）：

const keys = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0];

htmlKeys = keys.map(key => `<div class=key>${key}</div>`);

document.querySelector(".keypad").innerHTML = htmlKeys.join("");

.keypad {
  width: 12em;
  display: flex;
  flex-wrap: wrap;
  background: #333;
}

.key {
  width: 3em;
  background: #444;
  color: #eee;
  text-align: center;
  line-height: 3em;
  border-radius: 0.25em;
  margin: 0.25em;
}

<div class=keypad />

使用display: inline-block的替代“旧学校”解决方案（可能与Material UI中的某些样式冲突）：

const keys = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0];

htmlKeys = keys.map(key => `<div class=key>${key}</div>`);

document.querySelector(".keypad").innerHTML = htmlKeys.join("");

.keypad {
  width: 12em;
  background: #333;
}

.key {
  width: 3em;
  background: #444;
  color: #eee;
  text-align: center;
  line-height: 3em;
  border-radius: 0.25em;
  margin: 0.25em;
  display: inline-block;
}

<div class=keypad />

另一种可能性是CSS grid，但我认为flexbox在这种情况下已经足够了（并且有更好的浏览器支持）。

如何使用CSS将按钮移动到新行？

1 个答案: