HTML和CSS中的对齐问题_Html_Css

HTML和CSS中的对齐问题

html css

HTML和CSS中的对齐问题,html,css,Html,Css,我有一个简单的登录/注册页面，我正在做。网站的登录和注册部分都存在问题，因为文本框中提及要写什么的文本彼此不一致。我试着前后改变利润率，无论我如何改变，我仍然有同样的问题正如你可以在登录密码和城市和电子邮件部分看到的那样，不要像应该的那样贴在左边。有什么好办法解决这个问题吗？还有，是否有任何干净的方法将文本与文本框配对，以便它们始终对齐？在下面，您可以找到我用于此部分网站的代码 /*------------主体和div位置------------------*/ 身体{ 文本对齐：居中； }

我有一个简单的登录/注册页面，我正在做。网站的登录和注册部分都存在问题，因为文本框中提及要写什么的文本彼此不一致。我试着前后改变利润率，无论我如何改变，我仍然有同样的问题

正如你可以在登录密码和城市和电子邮件部分看到的那样，不要像应该的那样贴在左边。有什么好办法解决这个问题吗？还有，是否有任何干净的方法将文本与文本框配对，以便它们始终对齐？在下面，您可以找到我用于此部分网站的代码

/*------------主体和div位置------------------*/ 身体{ 文本对齐：居中； } 窗口容器{ 宽度：600px；高度：400px；保证金：100美元； } 标志和标语{ 背景图片：urlwimage.png；身高：继承；宽度：340px；浮动：左； } 登录并注册{ 身高：继承；宽度：250px；左边距：10px；浮动：对； } 登录{ 文本对齐：居中；背景颜色：海蓝宝石；高度：120px； } 报名{ 文本对齐：居中；背景颜色：棕色；高度：270px；边缘顶部：10px； } /*--------------对组成部分的修改------------------*/ 输入{ 浮动：对；保证金：3px0； } 挑选{ 浮动：对；保证金：3px0； } 标签{ 浮动：左；保证金：5px0； } 氢{ 边距：0 0 2px 0；填充：3倍；字体大小：20px； } 登录电子邮件暗语报名名字姓性别男性的女的城市国电子邮件暗语重复PSW

你可以给我们表格形式，它们很容易管理

形式{ 背景颜色：红色 } H1{ 文本对齐：居中 } 你好电子邮件暗语

你可以给我们表格形式，它们很容易管理

形式{ 背景颜色：红色 } H1{ 文本对齐：居中 } 你好电子邮件暗语

与往常一样，使用经典CSS float、clear等的痛苦之处在于Flexbox轻松：

登录并注册{ 身高：继承；宽度：250px；左边距：10px；浮动：对； } 登录{ 文本对齐：居中；背景色：7fffd4；填充物：5px； } 报名{ 文本对齐：居中；背景色：a52a2a；边缘顶部：10px；填充物：5px； } 表格组{ 显示：-网络工具包盒；显示：-ms flexbox；显示器：flex；证明内容：之间的空间；边框：00f虚线1px；边缘底部：2px； } 表单div输入{ 宽度：120px； } 表格分区选择{ 宽度：124px； } 登录电子邮件暗语报名名字姓性别男性的女的城市国电子邮件暗语重复PSW

与往常一样，使用经典CSS float、clear等的痛苦之处在于Flexbox轻松：

/*------------主体和div位置------------------*/ 身体{ 文本对齐：居中； } 窗口容器{ 宽度：600px；高度：400px；保证金：100美元； } 标志和标语{ 背景图片：urlwimage.png；身高：继承；宽度：340px；浮动：左； } 登录并注册{ 身高：继承；宽度：250px；左边距：10px；浮动：对； } 登录{ 文本对齐：居中；背景颜色：海蓝宝石；高度：120px； } 报名{ 文本对齐：居中；背景颜色：棕色；高度：270px；边缘顶部：10px； } /*------------修改关于格式部分的定义------------------*/ 输入{ 浮动：对；保证金：3px0； } 挑选{ 浮动：对；保证金：3px0； } 标签{ 浮动：左；保证金：5px0；清除：左； } 氢{ 边距：0 0 2px 0；填充：3倍；字体大小：20px； } 登录电子邮件暗语报名名字姓性别男性的女的城市国电子邮件暗语重复PSW 添加清除：左；要添加标签，这将防止一个标签向右移动另一个标签，因为它与性别和城市有关

/*------------主体和div位置------------------*/ 身体{ 文本对齐：居中； } 窗口容器{ 宽度：600px；高度：400px；保证金：100美元； } 标志和标语{ 背景图片：urlwimage.png；身高：继承；宽度：340px；浮动：左； } 登录并注册{ 身高：继承；宽度：250px；左边距：10px；浮动：对； } 登录{ 文本对齐：居中；背景颜色：海蓝宝石；高度：120px； } 报名{ 文本对齐：居中；背景颜色：棕色；高度：270px；边缘顶部：10px； } /*--------------对组成部分的修改------------------*/ 输入{ 浮动：对；保证金：3px0； } 挑选{ 浮动：对；保证金：3px0； } 标签{ 浮动：左；保证金：5px0；清除：左； } 氢{ 边距：0 0 2px 0；填充：3倍；字体大小：20px； } 登录电子邮件暗语报名名字姓性别男性的女的城市国电子邮件暗语重复PSW 使用CSS Flexbox

我已经完成了登录表单，你也可以重复同样的注册。请包装您的标签并输入选择标签。这将帮助您消除标记

身体{ 文本对齐：居中； } 窗口容器{ 宽度：600px；高度：400px；保证金：100美元； } 标志和标语{ 背景图片：urlwimage.png；身高：继承；宽度：340px；浮动：左； } 登录并注册{ 身高：继承；宽度：250px；左边距：10px；浮动：对； } 登录{ 文本对齐：居中；背景颜色：海蓝宝石；高度：170px； } 报名{ 文本对齐：居中；背景颜色：棕色；高度：270px；边缘顶部：10px； } /*--------------对组成部分的修改------------------*/ .灵活表格p{ 显示器：flex； } 输入{ 弹性：1；保证金：3px0；浮动：对； } 挑选{ 弹性：1；保证金：3px0；浮动：对； } 标签{ 弹性：1；保证金：5px0；浮动：左；文本对齐：左对齐； } 氢{ 边距：0 0 2px 0；填充：3倍；字体大小：20px； } 登录电子邮件

暗语

使用CSS Flexbox

我已经完成了登录表单，你也可以重复同样的注册。请包装您的标签并输入选择标签。这将帮助您消除标记

身体{ 文本对齐：居中； } 窗口容器{ 宽度：600px；高度：400px；保证金：100美元； } 标志和标语{ 背景图片：urlwimage.png；身高：继承；宽度：340px；浮动：左； } 登录并注册{ 身高：继承；宽度：250px；左边距：10px；浮动：对； } 登录{ 文本对齐：居中；背景色：水蓝海因；高度：170px； } 报名{ 文本对齐：居中；背景颜色：棕色；高度：270px；边缘顶部：10px； } /*--------------对组成部分的修改------------------*/ .灵活表格p{ 显示器：flex； } 输入{ 弹性：1；保证金：3px0；浮动：对； } 挑选{ 弹性：1；保证金：3px0；浮动：对； } 标签{ 弹性：1；保证金：5px0；浮动：左；文本对齐：左对齐； } 氢{ 边距：0 0 2px 0；填充：3倍；字体大小：20px； } 登录电子邮件

暗语

我的示例介绍如何利用bootstrap.form组并向标签添加最小宽度。尽管事后看来，在阅读flexbox的答案后，这可能是最简单的。我已经花了一点时间在这个答案上，所以无论如何我都会发布它

我还点出了许多不必要的标签，并为它们的元素指定了标签。有很多br和div不需要使用这种方法

登录并注册{ 身高：继承；左边距：10px； /*浮动：对*/ } 登录{ 背景颜色：海蓝宝石；溢出：隐藏；宽度：300px； } 报名{ 背景颜色：棕色；边缘顶部：10px；宽度：300px；溢出：隐藏； } 标签{ 最小宽度：90px； } 登录电子邮件暗语报名名字姓性别男性的女的城市国电子邮件暗语重复PSW

我还点出了许多不必要的标签，并为它们的元素指定了标签。有很多br和div不需要使用这种方法

让我们在这里做一些清理和简化

首先，我们要去掉所有的标签。不需要

下一步，我们将停止与彩车。Float非常适合它的用途，即让文本环绕浮动元素。Float对于它经常使用的功能来说并不是很好，它是内联块的一个糟糕的替代品-糟糕，因为您必须设置明确的高度，担心清除，等等

登录并注册{ 宽度：250px；左边距：10px； } 登录{ 背景颜色：海蓝宝石； } 报名{ 背景颜色：棕色；边缘顶部：10px； } 标签{ 宽度：80px；/*根据口味调整*/ 显示：内联块 } 登录电子邮件暗语报名名字姓性别男性的女的城市国电子邮件暗语重复PSW

让我们在这里做一些清理和简化

首先，我们要去掉所有的标签。不需要

@这并不能完全解决问题。@giorgio你可以在这里使用更好的语言。这会把一切搞砸吗？如果你依赖于float，你需要一些清除。添加了整个html代码，并删除了每个标签和输入对前后的div，因为它们在此时没有任何区别。@Pete Spot on，clear:这两个都让一切变得更加一致@这并不能完全解决问题。@giorgio你可以在这里使用更好的语言。这会把一切搞砸吗？如果你依赖于float，你需要一些清除。添加了整个html代码，并删除了每个标签和输入对前后的div，因为它们在此时没有任何区别。@Pete Spot on，clear:这两个都让一切变得更加一致！我也使用表格，它们对布局非常健壮，但出于某种原因，大多数开发人员会告诉您不要使用它们。表格布局非常高效，它们同步加载，并且是一种环境方式，可以产生很酷的效果layouts@JeremyThille谢谢你的意见。虽然我相信只提供一个问题的提示，但下次我会提供详细的答案：出于某种原因，大多数开发人员会告诉你不要使用它们——看着历史循环是一件很有趣的事情。表格最初名声不好，因为人们不想学习CSS，而使用过于复杂的表格进行布局。人们甚至会因为你将表格用于表格数据而嗤之以鼻。我也使用表格，它们对于布局非常强大，但出于某种原因，大多数开发人员会告诉你不要使用它们。表格布局非常有效，它们同步加载，是一种产生冷空气的环境方式layouts@JeremyThille谢谢你的意见。虽然我相信只提供一个问题的提示，但下次我会提供详细的答案：出于某种原因，大多数开发人员会告诉你不要使用它们——看着历史循环是一件很有趣的事情。表格最初名声不好，因为人们不想学习CSS，而使用过于复杂的表格进行布局。人们甚至会因为你使用表格来获取表格数据而对你嗤之以鼻。我觉得你的代码片段看起来一团糟。男性选择在性别下，最后一个输入粘在提交按钮的右边…@JeremyThille-Hmm-这里看起来很完美。我想知道是什么造成了不同。您使用的是哪种浏览器和操作系统？Chrome和windows7@Johannes确实需要做什么，正如我在上面的评论中与Pete讨论的那样，我清楚地指出：br标记和JeremyThille都发挥了神奇的作用。@JeremyThille只是让容器稍微宽一点-显然chrome中的输入字段在默认情况下更宽，并且不适合使用较长标签Family Name和重复PSW的行，这种笨拙的移动是由这个事实和浮动设置造成的。我觉得你的代码片段看起来一团糟。男性选择在性别下，最后一个输入粘在提交按钮的右边…@JeremyThille-Hmm-这里看起来很完美。我想知道dif是什么造成的

引用。您使用的是哪种浏览器和操作系统？Chrome和windows7@Johannes确实需要做什么，正如我在上面的评论中与Pete讨论的那样，我清楚地指出：br标记和JeremyThille都发挥了神奇的作用。@JeremyThille只是让容器稍微宽一点-显然chrome中的输入字段在默认情况下更宽，并且不适合使用较长标签Family Name和重复PSW的行，这种笨拙的换档是由这一事实和浮动设置造成的。