Question

我希望将日历放在彼此旁边而不是彼此之间，但是在尝试拖动日历时，它们不会移动。有没有人知道如果可能的话我该怎么办？感谢

这是我的代码（我正在使用visual studio 2010）

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication9.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>
    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    <p>
    </p>
</asp:Content>

calendar positions

Answer 1

日历以垂直顺序显示的原因是因为呈现的ASP.NET标记使用<table>，默认情况下是一个块元素（有关可用元素布局的更多信息here和{{ 3}}）。有两种方法可以解决这个问题：

使元素不使用块布局。您可以使用CSS属性display:inline;覆盖它，例如：

<head runat="server">
<style type="text/css">
    .inline{ display: inline; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:Calendar ID="Calendar1" runat="server" CssClass="inline" />
    <asp:Calendar ID="Calendar2" runat="server" CssClass="inline" />
</div>
</form>

将包含这些日历控件的包含元素包裹起来，使它们排成一行。有关此示例，请参阅Ryan Sammut的回答。

Answer 2

将日期插入div中，然后设置div格式以使其具有所需的位置。我做了一个快速草图，它很好用：

<div id="date1"> 
    <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>
</div>
<div id="date2" style="position: relative; left: 300px; margin-top: -163px;">
    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</div>

Answer 3

使用Table并将两个日历排列在一列中的两列中。

Answer 4

尝试使用此代码调整左侧位置：

<div id="date1" style="position: absolute; left: 370px; margin-top:;">
    <asp:calendar id="Calendar1" runat="server" Visible="true" >/asp:calendar>
</div>

<div id="date2" style="position: absolute; left: 100px;">
    <asp:calendar id="Calendar1" runat="server" Visible="true" >          
    </asp:calendar>
</div>

Answer 5

这个代码!!!

   <div id="date1" style="position: absolute; left: 370px; ">
                   <asp:calendar id="Calendar1" runat="server" Visible="true" > 

  </asp:calendar>
 </div>

 <div id="date2" style="position: absolute; left: 100px; ">
    <asp:calendar id="Calendar2" runat="server" Visible="true">  

  </asp:calendar>
  </div>

如何将2个日历放在彼此旁边而不是彼此之间？

5 个答案: