求助：如何用TS实现带黑色内边距的骰子Div并排显示

嘿，我看你已经搞定了掷骰子的核心逻辑，就差布局和样式这两步了！这两个问题其实都不难，咱们一步步来解决：

1. 为什么父Div设display: inline没用？ #

你之前给父容器加display: inline，但子Div默认是块级元素（block），块级元素会独占一行，所以哪怕父容器是行内元素，子元素还是会换行。要让骰子并排，有两种更靠谱的方案：

方案A：用Flex布局（推荐，现代布局方式） #

给父容器设置display: flex，它会自动让子元素横向排列，还能轻松控制对齐方式：

// 创建父容器时设置Flex布局
const diceContainer = document.createElement('div');
diceContainer.style.display = 'flex';
diceContainer.style.justifyContent = 'center'; // 让骰子居中
diceContainer.style.gap = '8px'; // 骰子之间的间距

方案B：给子元素设inline-block #

如果不想用Flex，也可以给每个骰子的Div设置display: inline-block，这样块级元素就会变成行内块，能并排显示：

// 在Die类的构造函数里给子Div加样式
this.div.style.display = 'inline-block';
this.div.style.margin = '4px'; // 避免骰子紧贴

2. 用TS给骰子添加黑色内边距 #

你说的“黑色内边距”，我理解有两种常见实现方式，选你需要的就行：

方式1：黑色背景+白色内容区（模拟内边距为黑色） #

这种方式是让骰子外层Div用黑色背景，内部套一个白色Div放点数，外层的padding就是黑色的“内边距”：

class Die {
  div: HTMLElement;
  value: string;

  constructor(value: string) {
    this.value = value;
    this.div = document.createElement('div');
    
    // 外层：黑色背景+padding
    this.div.style.padding = '10px';
    this.div.style.backgroundColor = 'black';
    this.div.style.borderRadius = '4px'; // 可选：圆角骰子
    
    // 内层：白色内容区显示点数
    const contentDiv = document.createElement('div');
    contentDiv.style.backgroundColor = 'white';
    contentDiv.style.width = '30px';
    contentDiv.style.height = '30px';
    contentDiv.style.display = 'flex';
    contentDiv.style.justifyContent = 'center';
    contentDiv.style.alignItems = 'center';
    contentDiv.style.fontSize = '20px';
    contentDiv.textContent = this.value;
    
    this.div.appendChild(contentDiv);
  }
}

方式2：黑色边框+内边距 #

如果是想给骰子加黑色边框，同时内部留白色的内边距，直接设置border和padding就行：

class Die {
  div: HTMLElement;
  value: string;

  constructor(value: string) {
    this.value = value;
    this.div = document.createElement('div');
    
    // 黑色边框+内边距
    this.div.style.padding = '10px';
    this.div.style.border = '2px solid black';
    this.div.style.backgroundColor = 'white';
    this.div.style.borderRadius = '4px';
    this.div.style.width = '30px';
    this.div.style.height = '30px';
    this.div.style.display = 'flex';
    this.div.style.justifyContent = 'center';
    this.div.style.alignItems = 'center';
    this.div.style.fontSize = '20px';
    this.div.textContent = this.value;
  }
}

完整示例代码 #

把布局和样式结合起来，完整的实现大概是这样：

class Die {
  div: HTMLElement;
  value: string;

  constructor(value: string) {
    this.value = value;
    this.div = document.createElement('div');
    
    // 这里选你喜欢的样式方式，比如方式1：
    this.div.style.padding = '10px';
    this.div.style.backgroundColor = 'black';
    this.div.style.borderRadius = '4px';
    
    const contentDiv = document.createElement('div');
    contentDiv.style.backgroundColor = 'white';
    contentDiv.style.width = '30px';
    contentDiv.style.height = '30px';
    contentDiv.style.display = 'flex';
    contentDiv.style.justifyContent = 'center';
    contentDiv.style.alignItems = 'center';
    contentDiv.style.fontSize = '20px';
    contentDiv.textContent = this.value;
    
    this.div.appendChild(contentDiv);
  }
}

// 创建父容器并添加4个骰子
const diceContainer = document.createElement('div');
diceContainer.style.display = 'flex';
diceContainer.style.justifyContent = 'center';
diceContainer.style.gap = '8px';
diceContainer.style.marginTop = '20px';

for (let i = 1; i <= 4; i++) {
  const die = new Die(i.toString());
  diceContainer.appendChild(die.div);
}

document.body.appendChild(diceContainer);

这样你的4个骰子就能并排显示，而且每个都有黑色的内边距啦！

内容的提问来源于stack exchange，提问作者czr