<a> 标签在 asp.net 母版页中没有移动答案

【问题标题】：<a> tag is not moving in asp.net master page<a> 标签在 asp.net 母版页中没有移动
【发布时间】：2018-06-26 04:44:18
【问题描述】：

这是 MasterPage.master 文件：

<%@ Master Language="C#" AutoEventWireup="true" 
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="css/style.css" media="all" />

</head>
<body>
    <form id="form1" runat="server">
    <div id="div1">

    </div>
    <div id="div2">
    </div>
    <div id="div3">
        <a href="" id="a1">Home</a> <br />
        <a href="" id="a2">Contact Us</a> <br />
        <a href="" id="a3">Login</a>
    </div>
</form>

这是css文件：

body
{
    background-color: aquamarine;
}

#div1
{
    height:300px;
    width: 300px;
    border: 2px solid red;
}

#div2
{
    height: 300px;
    width: 1314px;
    border: 2px solid red;
    position: absolute;
    left: 314px;
    top: 15px;
}

#div3
{
    height: 500px;
    width: 300px;
    border: 2px solid darkmagenta;
    text-align:center;
}

#a1
{
}

#a2
{
}

#a3
{
}

我希望 "Home" 文本必须位于 div3 的顶部并居中并有一些上边距，联系我们应该位于 div3 的中间并居中并登录应该是 div3 的底部并以一些底部边距居中。我应用了一些 CSS 属性，例如 position: absolute、margin、top 等，但不能做我想做的事。

【问题讨论】：

标签： html css asp.net

【解决方案1】：

这看起来是一个使用 CSS Flexbox 的好地方。将您的 Flexbox 属性添加到您设置 #div3 样式的区域。要在链接周围添加边距，您可以在此选择器内添加 margin 属性：#div3 a（尽管我建议为每个链接添加一个类，然后为该类设置样式）。

body
{
  background-color: aquamarine;
}

#div1
{
  height:300px;
  width: 300px;
  border: 2px solid red;
}

#div2
{
  height: 300px;
  width: 1314px;
  border: 2px solid red;
  position: absolute;
  left: 314px;
  top: 15px;
}

#div3
{
  height: 500px;
  width: 300px;
  border: 2px solid darkmagenta;

  /* Flexbox properties */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

#div3 a {
  /* Apply a margin around each link */
  margin: 1rem;
}

<form id="form1" runat="server">
    <div id="div1">
    </div>
    <div id="div2">
    </div>
    <div id="div3">
        <a href="" id="a1">Home</a> <br />
        <a href="" id="a2">Contact Us</a> <br />
        <a href="" id="a3">Login</a>
    </div>
</form>

【讨论】：

没有 flexbox 属性我想这样做
查看我发布的代码 sn-p。最重要的属性在#div3 中：display、flex-direction、align-items 和 justify-content。
但是不使用 flexbox 怎么办
您是否有不想使用 Flexbox 的原因？我认为它非常适合您的问题。
我的 Visual Studio 2010 不支持 flexbox