RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 732671
Accepted
andreymal
andreymal
Asked:2020-10-18 22:26:38 +0000 UTC2020-10-18 22:26:38 +0000 UTC 2020-10-18 22:26:38 +0000 UTC

复杂元素的基线对齐

  • 772

我有一个行,行中有一堆不同背景和不同文本大小的元素,有两个任务:

  • 将这些元素的背景拉伸到行的全高

  • 将所有文本与基线对齐(由于底部有边框,因此有必要将其稍微移至块中心下方,使其看起来居中)

也就是说,我想要这样的东西:

最初,我用许多填充物愚蠢地做到了这一点,但后来有必要制作具有可变高度的自适应布局,并且支持填充物已经是某种地狱。将需要更少的拐杖,以便可以任意改变线的高度,同时没有任何东西分开。

另外,这两个任务要解决 - 只是吐。您可以将块拉伸到它们的全高,但是文本的垂直对齐方式会移出。您可以垂直对齐文本,但无法拉伸背景。这是我无法弄清楚如何一次解决所有问题的问题。

对齐但没有背景的片段:

.myblock {
  background-color: #fdd;
  height: 44px;
  border-bottom: 15px solid #ccf;
}

.myitem {
  display: inline-block;
  vertical-align: baseline;
  background-color: #ddf;
}

.myitem1 {
  font-size: 14px;
}

.myitem2 {
  font-size: 28px;
  margin-top: 10px;
}

.myitem3 button {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: 18px;
  background-color: white;
}
<div class="myblock">
  <div class="myitem myitem1">Мелкие букофки</div>
  <div class="myitem myitem2">Бальщие букафки</div>
  <form class="myitem myitem3">
    <button>quit</button>
  </form>
</div>

html
  • 3 3 个回答
  • 10 Views

3 个回答

  • Voted
  1. Павел А.А.
    2020-10-19T04:20:17Z2020-10-19T04:20:17Z

    让它通过显示:灵活,不要受苦。将文本放在 P 标签中并用另一个 div 包装。首先对齐 Myitem div,然后对齐其中的文本。

    • 1
  2. Павел А.А.
    2020-10-19T06:21:46Z2020-10-19T06:21:46Z

    该死的,我开始按照建议做,它不起作用:))

    试试这样:

        .myblock {
          background-color: #fdd;
          height: 44px;
          border-bottom: 15px solid #ccf;
         overflow: hidden;
         margin-top: 10px;
          
        }
        .myitem {
            background-color: #ddf;
           display: flex;
           align-items: flex-end;
           
        }
        .myitem1 {
          height: 29px;
          font-size: 14px;
        }
        .myitem2 {
          font-size: 28px;
         
        }
        .myitem3 button {
          height: 29px;
          margin: 0;
          padding: 0;
          border: 0;
          font-family: inherit;
          font-size: 18px;
          background-color: white;
        }
        p {
          position: relative;
        }
        .myblock {
          display: flex;
          align-items: center;
        }
        <div class="myblock">
          <div class="myitem myitem1 ">
             <div>Мелкие букофки</div>
             </div>
          <div class="myitem myitem2">
            <div>Бальщие букафки</div>
          </div>
          <div>
            <form class="myitem myitem3">
              <div>
                <button>quit</button>
              </div>
            </form>
          </div>
        </div>

    这当然是完全的拐杖,但至少是一些东西。没错,按钮没有中毒。也许css大师可以提供帮助。

    • 0
  3. Best Answer
    andreymal
    2020-10-23T20:37:05Z2020-10-23T20:37:05Z

    经过数小时的反思,我找到了解决问题的方法。要点是这样的:

    • 我们设置了所需的容器font-size,并line-height在它们的帮助下设置了基线的位置。

    • 在里面,我们把 's 推div到容器一样高的地方。font-size并且line-height像基线本身一样被继承。背景完全设置在这里,结果是全高。

    • 我们将 's推div入span's,为它们设置所需的字体大小并重置line-height. 由于它span是一个内联元素,因此基线是继承的,无论此处设置的字体大小如何,文本都将与其对齐。

    • 这本可以结束,但我记得我需要一个全高按钮。但是,在按钮中,文本不是与基线对齐,而是与按钮高度相关的中心对齐(至少在 Firefox 中),这就是为什么按钮不断努力离开某个地方的原因。因此,您必须将两个span相互塞入按钮中:第一个将是 inline-block 并拉伸到全高(类似于div上面描述的那个) - 它重置文本的垂直对齐方式;第二个已经包含所需大小的所需文本。按钮本身也被拉伸到最大高度,并且vertical-align: top不能移动到任何地方。

    height之后,您可以通过将容器的,line-height和font-sizey 替换为所需的值来任意更改整个结构的高度。(我没有检查百分比,但我不需要它)。像这样的东西:

    .myblock {
      background-color: #fdd;
      height: 44px;
      border-bottom: 15px solid #ccf;
      font-size: 16px; /* подбирается методом тыка */
      line-height: 59px; /* height + border */
    }
    
    .myitem {
      display: inline-block;
      vertical-align: baseline;
      background-color: #ddf;
      height: inherit;
    }
    
    .myitem1 > span {
      font-size: 14px;
      line-height: 1.25;
    }
    
    .myitem2 > span {
      font-size: 28px;
      line-height: 1.25;
    }
    
    .myitem3 button {
      margin: 0;
      padding: 0;
      border: 0;
      font-family: inherit;
      background-color: white;
      height: inherit;
      line-height: inherit;
      font-size: inherit;
      vertical-align: top;
    }
    
    .myitem3 button > span {
      display: inline-block;
      height: inherit;
    }
    
    .myitem3 button > span > span {
      font-size: 14px;
      line-height: 1.25;
    }
    <div class="myblock">
      <div class="myitem myitem1"><span>Мелкие букофки</span></div>
      <div class="myitem myitem2"><span>Бальщие букафки</span></div>
      <form class="myitem myitem3">
        <button><span><span>quit</span></span></button>
      </form>
    </div>

    然而,一切看起来都是歪的;如果有人提出更好的解决方案,我很乐意看到。

    • 0

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    Python 3.6 - 安装 MySQL (Windows)

    • 1 个回答
  • Marko Smith

    C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

    • 2 个回答
  • Marko Smith

    返回指针的函数

    • 1 个回答
  • Marko Smith

    我使用 django 管理面板添加图像,但它没有显示

    • 1 个回答
  • Marko Smith

    这些条目是什么意思,它们的完整等效项是什么样的

    • 2 个回答
  • Marko Smith

    浏览器仍然缓存文件数据

    • 1 个回答
  • Marko Smith

    在 Excel VBA 中激活工作表的问题

    • 3 个回答
  • Marko Smith

    为什么内置类型中包含复数而小数不包含?

    • 2 个回答
  • Marko Smith

    获得唯一途径

    • 3 个回答
  • Marko Smith

    告诉我一个像幻灯片一样创建滚动的库

    • 1 个回答
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Алексей Шиманский 如何以及通过什么方式来查找 Javascript 代码中的错误? 2020-08-03 00:21:37 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    user207618 Codegolf——组合选择算法的实现 2020-10-23 18:46:29 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5