如何在多个菜单之间添加空格答案

【问题标题】：how to add space between multiple menus如何在多个菜单之间添加空格
【发布时间】：2020-12-28 21:25:17
【问题描述】：

我试图在两个菜单之间留出空间

使用左边距和右边距但它不起作用。

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
<style>
  /*  .space{
       margin-left:5px;
    }*/
</style>

</head>
<body>
    <div class="navbar-fixed-top">
        <div class="col-md-12">
            <a link href="" style="font-size:20px;">ABCD Technology</a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-8"></div>
                <div class="col-md-4 space">
                    <div style="margin-right:20px;"></div>
                    @Html.ActionLink("Home", "Index", "Home")
                    @Html.ActionLink("Services", "Index", "Home")
                    @Html.ActionLink("PortFolio", "Index", "Home")
                    @Html.ActionLink("About", "Index", "Home")
                    @Html.ActionLink("Hire Developer", "Index", "Home")
                </div>
            </div>
        </div>
    </div>

    @RenderBody()

    <div class="navbar-fixed-bottom" style="margin-left:45px;">
        <footer>
            <p>&copy; @DateTime.Now.Year - CopyRight@flt.com</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

site.css

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

下面给出的代码也不起作用：

<div style="margin-left:5px;"></div>

我正在使用像这样的外部 css 类

<style>
  /*  .space{
       margin-left:5px;
    }*/
</style>

但这也行不通。

见上图我正在尝试在两个菜单之间添加一个空格

site.css 类有什么变化还是我设计了错误的菜单？

【问题讨论】：

似乎菜单没有包含在任何标签中。请同时提供运行时代码或 URL。
@Priyajain 看到这个控制台标签i.stack.imgur.com/HXazI.png我在我的问题中添加了我的 site.css 请看这个

标签： html css asp.net-mvc bootstrap-4

【解决方案1】：

请替换代码。

<style>
  /*  .space{
       margin-left:5px;
    }*/
    
</style>

作者

<style>
.space a{ margin:0 7px; display: inline-block; }        
</style>

【讨论】：

看到这个我添加了你的建议但不起作用看到这个图片i.stack.imgur.com/Bvgk0.png
您写道“我试图在两个菜单之间留出空间”。 ''
'' 这个div不需要腾空间。我们必须以标签为目标，以便在菜单之间留出空间。
表示标签表示我的页面标题？
你设置了''.space a{ margin:0 7px; }'' 这个 CSS 在内部页面上？
表示标签表示我当前页面的页眉？

【解决方案2】：

试试这个：

<style>
  /*  .space a{
       margin: 5px;
    }*/
</style>

这将有助于整个标签的边缘

【讨论】：