div具有相同的水平位置

时间:2014-09-26 15:01:37

标签: html css asp.net stylesheet

我有一个页面和两个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>

5 个答案:

答案 0 :(得分:0)

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>

答案 1 :(得分:0)

这是因为给你的第二个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>

答案 2 :(得分:0)

如果你给予顶级,必须给出位置。我可以看到你的代码位置没有给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>

答案 3 :(得分:0)

第二个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>

答案 4 :(得分:0)

我需要的只是

display:inline-block

没有更多的东西