Question

我有一个页面和两个div。它们应该以相同的顶部位置出现，但它们出现在不同的垂直行中。

一个具有不同的垂直位置，另一个具有不同的垂直位置。

为什么他们没有水平相同

以下是html

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs"    Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

   <title></title>
</head>
<body>
<form id="f1" runat="server">
<div style="margin-left:100px; top:10px; border-width:10px; width:400px; border-style:solid;">
fawad
</div>
<div style="margin-left:600px; top:10px; border-width:10px; width:200px; border-style:solid">ali</div>
</form>

Answer 1

top CSS样式不像你想象的那样工作。您可能希望使用float，但是，如果您想要更简单的修复，请尝试以下操作：

<form id="f1" runat="server" style="position: relative">
<div style="top:10px; border-width:10px; width:400px; border-style:solid; position: absolute; left: 0">
fawad
</div>
<div style="top:10px; border-width:10px; width:200px; border-style:solid; position: absolute; left: 420px">ali</div>
</form>

CSS框模型非常复杂，但如果你做了很多网络工作，那么值得学习。 float的工作方式如下：

<div style="float: left">fawad</div>
<div>ali</div>

Answer 2

这是因为给你的第二个div留下了保证金左边值。

只需删除第二个div的左边距值，然后将其添加到css：

div{
  display: inline-block;
}

所以你的Html看起来像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

   <title></title>
</head>
<body>
<form id="f1" runat="server">
<div style="margin-left:100px; top:10px; border-width:10px; width:400px; border-style:solid;">
fawad
</div>
<div style="top:10px; border-width:10px; width:200px; border-style:solid">ali</div>
</form>

Answer 3

如果你给予顶级，必须给出位置。我可以看到你的代码位置没有给div。

我已更正您的HTML代码。请查看下面给出的代码。它工作正常，满足您的要求。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

   <title></title>
</head>
<body>
<form id="f1" runat="server">
<div style="margin-left:100px; position:absolute;top:10px; border-width:10px; width:400px; border-style:solid;">
fawad
</div>
<div style="margin-left:600px; position:absolute;top:10px; border-width:10px; width:200px; border-style:solid">ali</div>
</form>
</html>

Answer 4

第二个div有太多边距，所以它溢出容器并下降到下一个可用空间。另外我相信如果没有设置明确的保证金左右值，无论什么未设置，将填充容器的其余部分。

<form id="f1" runat="server">
<div style="margin-left:100px; top:10px; border-width:10px; width:400px; border-style:solid;display:inline-block">
fawad
</div>
<div style="margin-left:100px; top:10px; border-width:10px; width:200px; border-     style:solid;display:inline-block">ali</div>
</form>

Answer 5

我需要的只是

display:inline-block

没有更多的东西

div具有相同的水平位置

5 个答案: