总宽度100%的Div容器溢出问题：Shiny布局排查

你遇到的问题本质是**inline-block元素的空白字符占位**——HTML代码中div之间的换行或空格会被浏览器渲染成空白字符，这些空白会占用额外宽度，哪怕子容器的百分比宽度加起来是100%，总宽度也会超过父容器，导致溢出。

以下是两种可靠的解决方法：

方案1：使用calc()手动扣除空白宽度 #

如果已经确认空白宽度固定为4px，可通过CSS的calc()函数，将每个子容器的宽度减去对应分摊的空白总宽度：

• 3个容器之间有2个空白，总空白宽度为2*4px=8px
• 按原宽度比例分摊空白：两个35%的容器各承担8px*(35/100)=2.8px，30%的容器承担8px*(30/100)=2.4px

修改后的代码示例：

library(shiny)

ui <- fluidPage(
  h2("My App"),
  br(),
  wellPanel(
    style = "width: 50%;",
    div(
      style = "width: calc(35% - 2.8px); display: inline-block; vertical-align: top;",
      selectInput("select1", "select 1 (35% width)", choices = 1:5)
    ),
    div(
      style = "width: calc(35% - 2.8px); display: inline-block; vertical-align: top;",
      selectInput("select2", "select 2 (35% width)", choices = 1:5)
    ),
    div(
      style = "width: calc(30% - 2.4px); display: inline-block; vertical-align: top;",
      selectInput("select3", "select 3 (30% width)", choices = 1:5)
    )
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

如果追求简化，也可以将总空白平均分摊给所有容器（8px/3≈2.67px），实际视觉差异极小。

方案2：使用Flexbox布局（更可靠推荐） #

Flexbox是现代CSS布局方案，完全规避inline-block的空白问题，还能自动适配不同屏幕，是更稳定的选择。只需给父容器添加display: flex，再用flex属性分配子容器宽度，gap属性精确控制间距：

修改后的代码示例：

library(shiny)

ui <- fluidPage(
  h2("My App"),
  br(),
  wellPanel(
    style = "width: 50%; display: flex; gap: 4px;",
    div(
      style = "flex: 35;",
      selectInput("select1", "select 1 (35% width)", choices = 1:5)
    ),
    div(
      style = "flex: 35;",
      selectInput("select2", "select 2 (35% width)", choices = 1:5)
    ),
    div(
      style = "flex: 30;",
      selectInput("select3", "select 3 (30% width)", choices = 1:5)
    )
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

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