html - 更改 actionButton 及其标签的大小

标签 html css r shiny

如何使 actionButton 及其标签变小,但仍位于按钮图标的中心?我已经能够使按钮和文本都变小,但结果是一个带有小文本的小按钮,不在按钮的中心。我想我可能正在错误地处理这个问题。这是一个按钮/文本变小但结果是文本未居中的按钮的示例。

library(shiny)

shinyApp(
    shinyUI(fluidPage(
        inputPanel(
            ## Original
            actionButton('button', 'Hi'),

            ## Text is smaller
            gsub('Hi', '<font size="1">Hi</font>',
                 actionButton('button1', 'Hi')),

            ## Text is smaller and button is smaller, but text is outside of button
            gsub('Hi', '<font size="1" align="center">Hi</font>',
                 actionButton('button2', 'Hi', style='height:20px'))
            )
    )),
    shinyServer(function(input,output){})
)

最佳答案

你真的应该只关注这里的 HTML 和 CSS。这里没有什么是真正的 R 和 Shiny 的。一个actionButton只是一个 HTML <button> .您可以设置字体大小和填充(文本周围的空间)的属性。

这是减少填充和减小字体大小的一种方法

actionButton('button2', 'Hi', style='padding:4px; font-size:80%'))

关于html - 更改 actionButton 及其标签的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33091505/

相关文章:

javascript - 根据<select>动态更改<label>的文本

html - 使缩略图部分宽度匹配缩略图而不是 Twitter Bootstrap v3 中的标题内容

jquery - 如何与 Fancybox3 字幕 block 中的表单输入进行交互?

python - 用于确定重叠日期范围的 SQL

html - 覆盖内联 img CSS,在容器 div 上使用内联 CSS

javascript - HTML Canvas 图像不显示?

html - CSS 图像作为具有叠加渐变颜色的背景

jquery - Nikebetterworld 视差效果演示 : image sizes

r - 使用重载运算符构建包

r - 在 Shiny R 中选择输入