HTML-如何在同一行上对齐所有对象-堆栈溢出

顺晟科技

2022-10-18 13:13:07

我正在尝试边界半径形状，但圆形形状与其他形状不在同一条线上，这正常吗？我怎么能把它放在同一条线上呢？

codepen：https：//codepen.io/kamy7/pen/greqwrw.

编辑：这是我忘记的HTML我必须打更多的字来保存它，哈哈。

<代码><；！文档类型HTML>；<；HTML Lang="；英文"；>；<；头部>；<；元字符集="；UTF-8"；>；<；meta HTTP-equiv="；X-ua-compatible"；内容="；IE=边缘"；>；<；元名称="；视口"；内容="；宽度=设备宽度，初始比例=1.0"；>；<；标题>；文档<；/标题>；<；/标题>；<；身体>；<；细分（>；）<；p类="；圆边"；>；圆边<；/p>；<；P类="；圆形"；>；圆形形状<；/p>；<；p类="；top-bottom"；>；圆形顶部，底部<；/p>；<；p类="；底部-顶部"；>；圆形底部，顶部<；/p>；<；/DIV>；<；/正文>；<；/HTML>；

<代码>正文{字体系列：Arial；字体粗细：粗体；颜色：#F2EA01；}.圆边{宽度：100px；高度：100px；背景：黑色；填充：20px；border-radius：25px；文本对齐：居中；显示：inline-block；}.圆形{宽度：100px；高度：100px；背景：黑色；填充：20px；边界半径：50%；文本对齐：居中；显示：inline-block；}.顶部-底部{宽度：100px；高度：100px；背景：黑色；填充：20px；border-radius：25px 0px 25px；文本对齐：居中；显示：inline-block；}.底部-顶部{宽度：100px；高度：100px；背景：黑色；填充：20px；border-radius：0px 25px 0px；文本对齐：居中；显示：inline-block；}

顺晟科技：

在"；DIV"；上

使用显示伸缩并从.bottom-top、.top-bottom、.circle-shape中删除宽度&；。rounded-edges

只需更改圆圈

中的文本

之前：body { font-family: Arial; font-weight: bold; color: #F2EA01; } .rounded-edges { width: 100px; height:100px; background: black; padding: 20px; border-radius: 25px; text-align: center; display: inline-block; } .circle-shape { width: 100px; height:100px; background: black; padding: 20px; border-radius: 50%; text-align: center; display: inline-block; } .top-bottom { width: 100px; height:100px; background: black; padding: 20px; border-radius: 25px 0px 25px; text-align: center; display: inline-block; } .bottom-top { width: 100px; height:100px; background: black; padding: 20px; border-radius: 0px 25px 0px; text-align: center; display: inline-block; }

之后：<代码><；p类="；圆形"；>；圆角形状<；/p>；

添加显示：flex；到DIV，使所有元素显示在一条水平线上。

只需添加<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <p class="rounded-edges">Rounded Edges</p> <p class="circle-shape">Circle Shape</p> <p class="top-bottom">Rounded top, bottom</p> <p class="bottom-top">Rounded bottom, top</p> </div> </body> </html>设置为包含所有形状的DIV.即使只有一个字母

也能工作。

上一篇：JavaScript-旋转时文本向下下一篇：HTML-保留DOCFX概念文档中的

网站建设

Html

HTML-如何在同一行上对齐所有对象-堆栈溢出