为什么这些框不对齐？
这个问题涉及到前端开发中的布局问题。当元素在页面中呈现时，其位置和大小是由CSS样式和布局算法决定的。如果元素的框不对齐，可能是由于以下几个原因：
- CSS样式问题：元素的框不对齐可能是由于CSS样式设置不正确导致的。例如，元素的margin、padding、border等属性设置不一致或者不正确，会导致元素的框不对齐。
- 盒模型问题：元素的框模型包括内容区域、内边距、边框和外边距。如果不同元素的框模型设置不一致，会导致框不对齐。可以通过设置box-sizing属性为border-box来统一元素的框模型。
- 浮动和定位问题：元素的浮动和定位属性也会影响框的对齐。如果元素使用了浮动或者定位属性，可能会导致框不对齐。可以通过清除浮动、设置定位属性等方式来解决框对齐问题。
- 响应式设计问题：如果页面是响应式设计的，即在不同屏幕尺寸下布局会发生变化，可能会导致框不对齐。可以通过媒体查询和弹性布局等方式来解决响应式布局下的框对齐问题。
针对这个问题，可以通过检查CSS样式、框模型、浮动和定位属性以及响应式设计等方面来排查和解决框不对齐的问题。
请注意，由于要求不能提及具体的云计算品牌商，因此无法给出腾讯云相关产品和产品介绍链接地址。
相关·内容
1回答
我有一个由5个中间对齐框(图像)组成的条状图：
.boxes {
display:inline-block;
text-align: center;
}
当单击这些框时，显示将更改为none (通过简单的js样式更改)，由于中心对齐，其余的框将水平移动到中间。我想为这个运动做一个CSS3转换--类似这样的事情
transition: translate 1s linear;
有可能这样做吗？
浏览 2提问于2017-02-19得票数 0
回答已采纳
1回答
为什么SSE/AVX需要对齐内存？
我经常得到的答案之一是，对齐内存加载比未对齐内存加载快得多。那么，为什么这种对齐的内存加载比未对齐的内存加载要快得多？
浏览 2提问于2013-02-12得票数 5
回答已采纳
3回答
使用此代码：
.header {
background-color: #444;
height: 56px;
color: white;
}
a {
padding: 20px;
}
input {
background-color: #444;
border: 0;
line-height: 24px;
margin-left: 10px;
color: white;
height: 56px;
padding: 0;
font-size: 20px;
vertical-align: middle;
}
<div class=&#
浏览 3提问于2015-06-22得票数 0
回答已采纳
这很难解释，所以让我给您一个链接：。您可以很容易地看到不想要的行为:框“6”跳到左边的导航下面，因为我使用了一个清除:左。
但很明显我不希望这种事发生。我不知道为什么会发生这种情况，因为导航没有被浮动，那么为什么它会跳到导航之下，我如何“修复”这个问题呢？
编辑：，我的问题有问题。我不知道这是怎么发生的:-/，但在问题中，我说过导航是不会浮起来的，即使是这样！这就是为什么浮子对我来说没有意义。我忽略了这个“微小”的细节。是的，现在很明显，为什么框“6”跳到导航下面。
浏览 1提问于2011-09-19得票数 0
回答已采纳
有没有人知道为什么LinkedIn分享按钮没有和它自己的计数框对齐？
我的意思不是将它与Facebook或Twitter等其他分享按钮对齐。
LinkedIn共享按钮未与其自身的计数器框对齐。
这里：
谢谢
浏览 1提问于2012-09-02得票数 2
1回答
我不明白为什么我的按钮和文本框不对齐。
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="Pic">Picture/File</label>
<div class="col-md-9 col-sm-7 col-xs-12">
<div class="input-group input-file" &g
浏览 0提问于2018-05-23得票数 1
回答已采纳
2回答
关于真正的问题。我开始学习HTML，遇到了一个我不明白为什么会发生的情况，我希望有人能向我解释这一点。
上面是我的代码，我不明白为什么在box1中引入文本这个词会导致整个框显示在一个新的行上。
一旦文本被删除，它就会重新对齐。欢迎任何帮助。
最后，我会说我尝试过粘贴代码(使用代码块按钮，并用<code>和<pre>标记包围我的代码，但是编辑器不会显示代码，或者每秒钟都会破坏代码块)。
浏览 1提问于2016-01-29得票数 1
回答已采纳
1回答
我试着把我的搜索框像上面的链接一样放在中心，但添加:align=>“中心”显然是错误的……这是我的资料..。
<h2 align="center"><%= link_to "List by Topic", topics_path %></h2>
<h2 align="center"><%= link_to "List by Organisation", hospitals_path %></h2>
<h2 align="center"
浏览 2提问于2013-04-30得票数 0
回答已采纳
我花了好几个小时才弄明白这事。为什么，在中，文本框会向下移动一点，而不是在与蓝色框相同的行上？提前感谢！
编辑:对不起，如果我没有清楚说明这一点：文本框的顶部应该与蓝色框的顶部对齐.
浏览 7提问于2011-11-13得票数 0
回答已采纳
2回答
有人知道如何通过TinyMCE接口启用header标记的文本对齐吗？如果我选择(任何header标签的)文本并选择一个对齐选项，它在编辑器中看起来是正确对齐的。然而，当我保存页面时，它被移回默认对齐方式(在我的例子中是左对齐)。
我也尝试过直接编辑HTML，但当我关闭对话框时，HTML似乎没有更新。
我在维基上找到了一些关于的文档，我试图在tiny_mce.js文件中更新这些文档，但似乎没有什么不同。
下面是来自tinyMceConfig.config文件的头标记的`valid_elements设置：
-h1[id|dir|class|align],-h2[id|dir|class|align
浏览 0提问于2010-10-01得票数 4
回答已采纳
4回答
在阅读了上的一些内容之后，我决定对这个特性进行一些实践，但却陷入了一个很难理解的问题。请您弄清楚为什么“文本行”不能在包装器div中垂直对齐。
.wrapper {
height: 200px;
background-color: aquamarine;
margin: 0;
padding: 0;
}
.ctxt {
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
.ctxt-before {
display: inline-block;
width
浏览 0提问于2018-09-14得票数 0
回答已采纳
我面临的问题与文本框大小时，veiwing在火福克斯3.6。< input class="dat“type=”文本“name="rejection_reason”size="51“maxlength="70”onchange=on_change()；“>
样式为：.dat {字体族: verdana，arial，helvetica；字体大小: 8pt；字体重:粗体；文本对齐:左；垂直对齐:中间；背景色:白色；}
Fire中的文本框大小比IE6小一些。
不确定为什么IE6和FireFox显示不同大小的文本框。
浏览 17提问于2010-03-23得票数 2
2回答
因此，我尝试在父div中垂直对齐和水平对齐文本框跨度，问题是它可以很好地对齐或对齐，而不是两者都对齐。如果它是单行文本，它可以工作，但如果它是一个很长的段落，需要多行的父div，它不会垂直对齐。 .objprevicnt {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
width:inherit;
height:50px;
transform: translate(-50%, -50%);
} 此外，我还动态地更改文本 document.getElementById("myid").innerHTML = '
浏览 36提问于2021-03-01得票数 -1
回答已采纳
我使用带有渐变填充等的KineticJS文本对象作为按钮。但现在verticalAlign属性最近被删除了，我如何在其边界框中垂直对齐我的文本呢？如果没有其他选择，为什么要删除该属性？
浏览 3提问于2012-10-29得票数 6
2回答
我已经开发了一个使用GTK的Python应用程序。我想向用户发送一个对话框，请求确认一个操作，但是在基于教程创建对话框之后，我注意到没有明显的方法来对齐'Cancel‘和'OK’按钮。
该教程中的相关代码如下：
class DialogExample(Gtk.Dialog):
def __init__(self, parent):
Gtk.Dialog.__init__(self, "My Dialog", parent, 0,
(Gtk.STOCK_CANCEL, Gtk.ResponseType.CANCEL,
浏览 0提问于2019-09-15得票数 2
回答已采纳
为什么这不起作用？它水平对齐正确，但在Opera中不是垂直对齐。在IE中，它根本不起作用。
#footer
{
position: absolute;
top: 905px;
width: 100%;
min-width: 800px;
height: 95px;
margin: 0px;
background-image: url('footerbg.png');
}
#center
{
position: relative;
width: 20%;
height: 70%;
marg
浏览 0提问于2010-12-06得票数 2
这里是jquery的新手，我想出了一个Ajax框来显示在链接下。对于页面左侧的链接，它可以正常工作，但当链接位于右侧时，框与页面的对齐不正确。我使用的是绝对定位的盒子自动取款机，这就是为什么它会对齐。
有没有办法让页面左侧的链接正确地向右对齐，然后在页面右侧的链接正确地向左对齐。我真的很欣赏你的见解！谢谢!
浏览 3提问于2011-11-24得票数 1
回答已采纳
要了解我的问题，请访问。在这里，备注文本框和按钮彼此对齐，但是当您单击SlideUp按钮然后单击SlideDown时，它们对齐方式会中断
以下是我的代码
$(document).ready(function(){
$("#btSlideDown").click(function(){
$("#txt").slideDown("slow");
$("#b2").slideDown("slow");
});
$("#btSlideUp").click(function(){
浏览 4提问于2013-03-24得票数 1
回答已采纳
我想要显示一个描述时间进程的图表。因此，希望能够根据给定的时间线对节点。
时间戳是完全准确的，这就是为什么我选择他们作为我的小组的关键。如果两个节点具有相同的时间戳，则将它们添加到同一组中。
这些组由TreeLayout对齐。默认情况下，它们以下列方式对齐：
(请注意，黑匣子显示组及其对齐情况。添加红色框是为了更好地理解哪个组是哪个级别。
我想要的是，一个时间更长的图表视图如下：
我试着设置layerStyle: go.TreeLayout.LayerUniform，然后相应地设置TreeVertex.level，但是GoJS没有改变它的位置。
还有其他的可能性来实现我想要
浏览 3提问于2015-08-24得票数 1
回答已采纳
7回答
好吧，这看起来是不可能正确的。我有一个文本框和一个选择框。我希望它们的宽度完全相同，这样它们就可以在左边距和右边距对齐。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
}
</style>
</head>
<body>
<
浏览 76提问于2012-04-04得票数 81
回答已采纳
<div class="bordered" style="height: 300px; text-align: center">
<div class="bordered inline-blocked" style="height: 100px; vertical-align: middle">XXX</div>
<div class="bordered inline-blocked" style="height: 200px;
浏览 4提问于2012-07-13得票数 2
2回答
您可以在消息框中居中显示文本吗？或者整个消息必须左对齐？另外，如何将消息框中的一些文本设置为粗体，并保留文本标准的其余部分？
浏览 2提问于2014-08-04得票数 1
回答已采纳
我有一些非常简单的代码，可以完美地实现我想要达到的效果。我有两个div，它们显示为"boxes“，它们包含在一个外部div中，即boxContainer。我让这些框紧挨着坐在一起，而不是一个在另一个的顶部，它们完美地对齐在屏幕的中间。当浏览器宽度变小/变大时，框的宽度会缩小/增大，如果浏览器窗口变得太小，框会重新定位为一个在另一个的顶部，同时保持在页面的中心。太完美了。
唯一的问题是框在底部对齐，而不是顶部对齐。由于第二个框中的文本较少，因此会进一步向下推入页面以与第一个框的底部对齐。我想让它们在顶部对齐。
我相信这是由display:inline-block引起的，但我不确定为什么，
浏览 0提问于2012-12-02得票数 22
回答已采纳
.container {
border: 1px solid;
height:200px;
}
.first {
display: inline-block;
font-size: 30px;
background-color: darkcyan;
border: 1px solid;
margin:50px 0 0 0;
}
.second {
display: inline-block;
border: 1px solid;
background-color: red;
font-size:30px;
margin:0;
}
<
浏览 1提问于2020-10-28得票数 0
回答已采纳
我在XAML中有以下代码。
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
浏览 1提问于2014-04-14得票数 0
我对网页设计比较陌生，我有一个关于中间位置和高度的问题，我希望任何人都能回答。
我试着用CSS在一个盒子里对一个盒子。我以前在另一个页面上使用了CSS代码片段(“这个部分”注释之间的部分，见下面)，并假设我必须将它放在#外层#内部{部件下，因为内部框是我想要的中间部分。这不起作用，所以我随机地把它放在#外层，它起作用了。我不知道为什么，希望有人能向我解释原因:)
另外，目前我有一个背景图片和我的页面上的2个框，当我缩小页面时，一切都缩小了。我想是因为一切都是按百分比计算的。我应该如何做到这样，当我最小化屏幕时，所有的东西都保持在原地，滚动条就会出现？我很难在这个网站上找到另一个类似的问题。
请
浏览 0提问于2019-01-06得票数 1
回答已采纳
与这里大致相同的问题，但正确对齐：
如何使这个蓝色文本框与窗口大小一起增长，使其最大宽度为200像素，并正确对齐？
这是我有的，但它居中而不是右对齐。为什么？
<DockPanel Background="LightSteelBlue">
<TextBox Margin="3 3 3 3" DockPanel.Dock="Right" MaxWidth="200" />
</DockPanel>
浏览 0提问于2012-08-22得票数 1
回答已采纳
1回答
我想要对齐
#navigation li a{}
A元素/容器/框不应离开其位置。我只想将文本定位在元素/容器/框(不管它叫什么)的左下角，并在边缘留出一些空间。文本对齐赋值是不够的。还有别的事吗？如前所述:a元素/容器/框不应该通过移动a框中的文本来移动。
我不能将另一个盒子放入我的a- box，因为我正在使用的导航是
wp_nav_menu
来自wordpress。
浏览 0提问于2013-01-20得票数 1
回答已采纳
我有一个登录屏幕与一些文本字段，文本框，按钮，并有背景图像到屏幕。现在的问题是在触摸设备上，当虚拟键盘弹出时，屏幕会随着背景图像而缩小，所有组件的对齐都会受到干扰。我也启用了垂直滚动到屏幕，但仍然对齐受到干扰。请帮我解决这个问题。
谢谢,
浏览 6提问于2011-06-27得票数 0
回答已采纳
2回答
我有下面的小提琴：
HTML代码如下：
<div class="loginbarGrad">
<div style="position:relative; float:right; padding: 11px 65px 0 0;">
<input type="text" placeholder="EMAIL" value="EMAIL" class="singleField" name="kp_email" id="kp_email&
浏览 0提问于2013-09-18得票数 0
回答已采纳
2回答
我喜欢对齐我的文本框，这样文本框就在另一个的正下方。
我有以下代码：
<div style="text-align: left; width: 1000px">
<fieldset>
<legend>Information</legend>
@Html.Label("Collector")
@Html.TextBoxFor(model => model.Collector)
<br />
<br /&
浏览 1提问于2014-05-09得票数 0
垂直对齐:底部，表示底部的内联框与其行框的底部相匹配，因此在我的例子中，span2的内联框是绿色的，其行高为100 of，继承自其父框。它的线框是黑色的，也有线高:100 is。所以它们是底部对齐的。见图：
我已经了解到：
1.垂直对齐只适用于内联/内联块元素。
2.垂直对齐是基于直线高度，而不是其容器的高度！
3.在线框中，其线高是内嵌框的线高(在我看来，它的内嵌元素或内嵌块元素)具有最高的直线高度。就像图片：
在内联块元素上，一切都很好，但内联元素似乎存在问题。
解释：
父母:身高:200 parent，直线高度；100 parent；
Div.child:内嵌块，垂直
浏览 1提问于2017-04-09得票数 1
回答已采纳
1回答
这不应该很难.我只想让datefield框在文本的右边对齐(购买日期)。由于某些原因，它只会在文本下面对齐，或者我可以在datefield框的右边得到文本对齐。如果我使用cfform format="flash“并在cfformgroup type=”水平“中对齐，它将工作。有人知道它为什么不能正常工作吗？或者知道怎么让它起作用。任何帮助都是非常感谢的。
Date of Purchase:
<cfinput
type="datefield"
name="from_date"
width="130"
value="#d
浏览 1提问于2014-09-12得票数 2
回答已采纳
我正在使用Visual Studio2008，并且已经创建了一个客户端报告定义(.rdlc)。
在这个报表中，我添加了一个文本框，并将其高度加倍。当我将TextAlign更改为“居中”时，它会正确地将文本居中，但当我将VerticalAlign设置为“居中”时，什么也不会发生。文本框很大，显然没有居中对齐。关于为什么会发生这种情况以及如何修复它，你有什么想法吗？
浏览 2提问于2009-10-28得票数 2
1回答
右对齐文本框中的符号
、、、
我的web应用程序中有文本框，这是对齐的。当我键入普通字符时(例如a，b，c.)如果我键入一个.But，它显示为名称$，它会正常工作。为什么.Is会有任何解决方案来避免这种情况。我使用javascript来设置对齐$("#<%=txtName.ClientID %>“).css(‘方向’，'rtl');
浏览 6提问于2012-02-14得票数 0
回答已采纳
在matplotlib中，如何调整图例标题的对齐方式？它总是居中的，但我需要它与图例框保持一致。我试图改变标题的文本艺术家的对齐，这是没有效果的。有关详细信息，请参阅以下示例：
from pylab import *
x = linspace(0, 1)
plot(x, x, label="1")
plot(x, x**2, label="2")
plot(x, x**3, label="3")
plot(x, sqrt(x), label="square root")
l = legend(title="Title&
浏览 11提问于2013-03-26得票数 30
我正在尝试使用VBA设置PPT幻灯片中的文本框的格式；方法是从Excel文件中获取文本框属性的输入值，如字体名称、对齐方式等。 Select Case Shp_new.Type
Case MsoShapeType.msoTextBox
Shp_new.TextFrame.TextRange.Font.Name = "" & textboxrange.Cells(1, 1).Value & ""
Shp_new.TextFrame.Text
浏览 313提问于2020-07-26得票数 0
2回答
我有一个JS MixItUp，我把它放在文本框中，但是我似乎无法让它在一个框中获得多行，垂直对齐，并保持在元素中。
要垂直对齐，我需要设置直线高度和垂直对齐到中间.
我把线高设置为盒子的大小(45 box )。
在这个中，您可以在下面的框中看到问题--单词就会从盒子里跳出来。
.courses span {
border: 1px solid white;
color: black;
display: grid;
font-size: 11px;
height: 45px;
background: #ffffff;
border: 2px
浏览 2提问于2017-05-20得票数 0
回答已采纳
1回答
在几何学中，有没有办法得到边界框的面？正如我尝试的那样，边界框只生成最小最大值。 我搞不懂的是如何获得边界框的面--这可能吗？
浏览 12提问于2019-10-01得票数 0
我找不到允许我在vb.net组合框中对齐文本的属性。文本框具有TextAlign属性，但组合框没有该属性。是否有Combo Box使用的其他属性？还是有别的办法呢？
谢谢
浏览 0提问于2012-07-20得票数 0
回答已采纳
我不明白为什么子div框不能整齐地对齐，有些包含文本，而另一些则没有。
下面是一个示例：
<html><head>
<style>
.parent {
background-color: #fff;
width: 80%;
border: 2px solid #f00;
}
.child {
display: inline-block;
width: 20%;
height: 50px;
border: 2px solid #00f;
}
</style>
</head><
浏览 0提问于2018-01-06得票数 0
2回答
我已经通过Netbeans Java创建了一个GUI，但是每当我最大化GUI窗口时，文本框就会错开。我使用Netbeans拖放功能来创建GUI。我想知道为什么每当我最大化GUI时，文本框就会不对齐
浏览 1提问于2013-07-27得票数 0
只是好奇是否有办法获得一个更紧密的布局与引导。
为什么文本元素之间有这么大的空间？
这一切都是为了容纳垫，电话等吗？
是否有任何方法可以为整个页面选择更紧密的样式以默认为？
我也认为编辑框本身太大了。文本和框的边缘之间有太多的浪费空间。
他们为什么不紧一点？
这些编辑是在尝试使用NetworkNerd的应答代码之后添加的。
我在样式表中添加了以下内容。
input[type=text]{
padding-top:0px; padding-bottom:0px;
margin-bottom:0px; /* Reduced from whatever it
浏览 0提问于2014-06-30得票数 10
回答已采纳
正如我从文档中了解到的，对齐项将以主轴为中心，而对齐项则以交叉轴为中心。那么，为什么中心框只对齐轴(现在是垂直的)？
通过改变为flex-direction: column;，它将水平对齐，但主轴似乎再次被忽略，因此在这种情况下它不会垂直中心。
.flex
{
display: flex;
justify-items: center; /* Does not seem to work */
align-items: center;
}
.center-box
{
background: green;
}
/* Flavor */
.flex
{
margin:
浏览 1提问于2021-08-12得票数 1
回答已采纳
如何使input和select表单元素在中对齐，使它们的水平边框对齐，并使所有文本(包括标签)与基线对齐？
我希望在一行中有一个label和一个input表单元素，以及另一个label和一个select表单元素。因此，我希望select和input元素的水平边框对齐，我也希望所有文本(包括标签)对齐基线。有可能吗？
我无法在IE8或FF上实现它的胜利。我尝试使用box-sizing: border-box;强制使用相同的框模型呈现input和select。
请参阅，它有以下代码：
<form action="Submit" method="post">
浏览 2提问于2010-10-26得票数 4
回答已采纳
1回答
磁扫描区域不精确
、、
在我的项目中，扫描区域(非阴影框)似乎与条形码扫描的真实扫描区域不一致。真正的区域似乎有点高于框，因为我必须把条形码稍微高于红线(我改变了我的Z行到纵向模式)，以使条形码被成功地读取。
所以我想知道framingRect中的CameraManager是实际的扫描区域，还是一个没有阴影的盒子？如果是这样的话，我应该如何移动非阴影框，使其与实际扫描区域对齐(反之亦然)。
浏览 2提问于2014-09-23得票数 3
回答已采纳
1回答
我有一个4英寸屏幕大小的背景图像。当显示在3.5英寸的屏幕上时，图像的顶部和底部不会显示。但是，我有其他视图，屏幕上的文本框也应该与背景图像对齐，但它们没有对齐。
以下是我的应用程序的一些图片：
3.5英寸屏幕：
4“屏幕：
如您所见，文本框比图像稍微向下移动。这是自动调整大小设置的屏幕截图：
这对于背景图像和文本框都是一样的。我不知道如何让应用程序将文本框向下移动指定的量，或者该怎么办？
如果您需要更多信息，请联系我们。
浏览 0提问于2013-12-09得票数 0
2回答
#myid{
border:1px solid black;
}
#myid code {
border:1px solid black;
font-size: 1.5em;
line-height: 3em;
vertical-align:top;
}
<main>
<p id="myid">trying to understand <code>vertical-align</code> better.&
浏览 1提问于2017-07-24得票数 2
4回答
因为代码很长，所以我对它很有兴趣。
<header>
<div>
</div>
</header>
小提琴：
问:您能告诉我为什么我的列表项与标题框中的导航不对齐吗？
要求:我想要我的单子
准确地位于标题框的中心，直线高度为3em。
提前谢谢。
浏览 3提问于2014-04-01得票数 0
回答已采纳
我想创建一个类似于的表单
特别是，我想学习如何将不同大小的输入框放在同一行上，下面是垂直对齐的标签。例如，在表单的"Name“部分，它有一个用于"first”和“last”的框。
如何在HTML和CSS中做到这一点呢？
浏览 2提问于2012-01-15得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
