Question

我正在尝试使用边框扩展到视口外部的标题，就像下面的图片一样。

我设法编写了一个与左边对齐的边框，边框使用如下代码扩展到左边：

library(shiny)
library(shinydashboard)

prgoressBar <- function(value = 0, label = FALSE, color = "aqua", size = NULL,
                        striped = FALSE, active = FALSE, vertical = FALSE) {
  stopifnot(is.numeric(value))
  if (value < 0 || value > 100)
    stop("'value' should be in the range from 0 to 100.", call. = FALSE)
  if (!(color %in% shinydashboard:::validColors || color %in% shinydashboard:::validStatuses))
    stop("'color' should be a valid status or color.", call. = FALSE)
  if (!is.null(size))
    size <- match.arg(size, c("sm", "xs", "xxs"))
  text_value <- paste0(value, "%")
  if (vertical)
    style <- htmltools::css(height = text_value, `min-height` = "2em")
  else
    style <- htmltools::css(width = text_value, `min-width` = "2em")
  tags$div(
    class = "progress",
    class = if (!is.null(size)) paste0("progress-", size),
    class = if (vertical) "vertical",
    class = if (active) "active",
    tags$div(
      class = "progress-bar",
      class = paste0("progress-bar-", color),
      class = if (striped) "progress-bar-striped",
      style = style,
      role = "progressbar",
      `aria-valuenow` = value,
      `aria-valuemin` = 0,
      `aria-valuemax` = 100,
      tags$span(class = if (!label) "sr-only", text_value)
    )
  )
}

progressGroup <- function(text, value, min = 0, max = value, color = "aqua") {
  stopifnot(is.character(text))
  stopifnot(is.numeric(value))
  if (value < min || value > max)
    stop(sprintf("'value' should be in the range from %d to %d.", min, max), call. = FALSE)
  tags$div(
    class = "progress-group",
    tags$span(class = "progress-text", text),
    tags$span(class = "progress-number", sprintf("%d / %d", value, max)),
    prgoressBar(round(value / max * 100), color = color, size = "sm")
  )
}

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(disable = TRUE),
  dashboardBody(uiOutput("plt1")))

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

output$plt1 <- renderUI({progressGroup(text = "A", value = 15399, min = 0, max = 20000, color = "green")
  })
})

shinyApp(ui = ui, server = server)

.wrapper {
      width: 1100px;
      margin: 0 auto;
      box-sizing: border-box;
      padding: 1.5rem;
    }  

    
  h2 {
      font-size: 2em; /* 32/16 */
      font-weight: 200;
      color: #000;
      position: relative;
      margin: 0 -9600rem;
      padding: 1.2rem 9600rem;
      background: transparent;
      z-index: 0;
      display:block;
      max-width:660px;
    }
    
    h2::before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      bottom: 0;
      left: 0rem;
      right: 9598.5rem;
      background: transparent;
      border:2px solid #000;
    }
    
    h2.right {
      font-size: 2em; /* 32/16 */
      font-weight: 200;
      color: #000;
      text-align: right;
      position: relative;
      margin: 0 -9600rem;
      padding: 1.2rem 9600rem;
      background: transparent;
      z-index: 0;
      display:block;
      max-width:660px;
    }
    
    h2.right::before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      bottom: 0;
      left: 9598.5rem;
      right: 0rem;
      background: transparent;
      border:2px solid #000;
    }

HTML：

CSS：

问题在于应该与包装器右侧对齐的文本并将边框向右扩展。到目前为止，我的结果如下：

文本仍然从包装器的左边缘开始，并且距离包装器的右边缘不是660px。知道如何解决这个问题吗？我尝试过使用多个变量，但没有任何效果。

Answer 1

我用小提琴玩了一下：https://jsfiddle.net/38t1286m/

编辑：我玩了更多...... https://jsfiddle.net/38t1286m/4/;）

基本上我简化了它，所以HTML看起来像这样：

<header>
    <h2>
         This is my LEFT side header
    </h2>
</header>
<p>
    Here is some text in between...
</p>
<header class="right">
    <h2>
         This is my RIGHT side header
    </h2>
</header>

使用以下css：

p {
    width: 660px;
    margin-right: auto;
    margin-left: auto;
}
h2 {
    border: 1px solid black;
    max-width: 660px;
    margin: 0;
    margin-left: auto;
    display: inline-block;
    padding-top: 20px;
    padding-bottom: 20px;
}
header {
    position: relative;
    max-width: 660px;
    padding: 0;
    margin: 0;
    margin-right: auto;
    margin-left: auto;
}
header:before {
    content: " ";
    width: 660px;
    border: 1px solid red;
    position: absolute;
    left: -660px;
    right: -660px;
    overflow: hidden;
    top: 0;
    bottom: 0;
}
header.right {
    text-align: right;
}
header.right:before {
    left: 660px;
    right: 660px;
}

至少我认为我会如何解决它。：）

Answer 2

您可以将第二个标题浮动到右侧，然后使用:after

清除它

h2.right {
  text-align: right;
  background: transparent;
  z-index: 0;
  float: right;
}

h2.right::after {
  content: '';
  clear: both;
}

codepen

标题边框扩展到视口外

2 个答案: