Question

我试图创建一个设置宽度的圆形div。它工作正常，但是一旦我添加了比屏幕上更多的div，圆圈的宽度就会被覆盖。父容器设置为overflow: scroll，div可滚动。

这是我的头像组件代码

 const Avatar= ({contact, email, circle, width, margin, fontSize, fontWeight}) => {
  let style = {}

  if (width) {
    style.width = `${width}px` || '32px'
    style.height = `${width}px` || '32px'
    style.margin = `${margin}px` || '4px'
  }

  if (circle) {
    style.borderRadius = `${width/2}px` || '16px'
  }

  let displayName;


  if (contact && contact.avatar) {
    return (
      <img style={style}
        src={contact.avatar}
        title={contact.FN || contact.wyreId || email}
        alt={contact.FN || contact.wyreId || email}
      />
    )
  } ... removed code that sets displayname

  // default display
  style.color = '#fff';
  style.background = 'orange';
  style.lineHeight = style.height;
  style.textAlign = 'center';
  style.fontSize = fontSize;
  style.fontWeight = fontWeight;
  return (
    <div style={style}>
        {
          displayName || '?'
        }
      </div>
  )
}

Here is an image of the components working as intended. Here is an image of the components not working as intended.

当我使用开发工具进行检查时，这是两种情况下添加到div的样式。 style=width: 32px; height: 32px; margin: 4px; border-radius: 16px; color: rgb(255, 255, 255); background: orange; line-height: 32px; text-align: center; font-size: 16px; font-weight: bold;

知道可能出现什么问题

此外，以下是在父div上设置的样式。

.horizontalList {
list-style-type: none;
margin-top: -20px;
margin-left: 2%;
margin-right: 2%;
padding-bottom: 10px;
display: inline-flex;
justify-content: center;
height: 60px;
overflow: scroll;}

Answer 1

这不是反应或内联样式问题。从父容器中删除属性display: inline-flex并将其添加到循环divs

请检查：working example

Answer 2

我可以通过在头像组件中设置import matplotlib.pyplot as plt # This import is just for the weird legend from matplotlib.lines import Line2D # This import is for the colormaps: from matplotlib import cm fig, axes = plt.subplots() # Setup colormap to have right number of colors (one per number of curves) n = df['curve_number'].nunique() colors = cm.jet(np.linspace(0,1,n)) # Actual plotting for i, (curve, data) in enumerate(df.groupby('curve_number')): plt.plot(data.x, data.y1, color = colors[i], linestyle='--', label='') plt.plot(data.x, data.y2, color = colors[i], label = curve) # Regular legend (top right corner): l1 = plt.legend(loc=1) axes.add_artist(l1) # Custom legend (bottom right corner): custom_lines = [Line2D([0], [0], color='black', linestyle='--'), Line2D([0], [0], color='black')] l2 = plt.legend(custom_lines, ['y1', 'y2'], loc=4) $ {width} px style.minWidth =来解决此问题。

内联样式反应元素宽度

2 个答案: