Question

我正在进行导航菜单，现在我正试图将文本水平和垂直放在框内。

以下是我的导航现在的样子：

以下是我希望的方式：

这是我的代码（我正在使用Umbraco）：

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{ var home = CurrentPage.Site(); }

@if (home.Children.Any())
{
    // Get the first page in the children 
    var naviLevel = home.Children.First().Level;

    // Add in level for a CSS hook 
    <ul class="meny level-@naviLevel">
        // For each child page under the home node
        @foreach (var childPage in home.Children)
{
    if (childPage.Children.Any())
    {

        <li class="dropdown has-child @(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
            @if (childPage.DocumentTypeAlias == "Huvudmeny")
            {
                <span>@childPage.Name</span>
                @childPages(childPage.Children)
            }
            else
            {
                <a href="@childPage.Url" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">@childPage.Name</a>
            }
            @helper childPages(dynamic pages)
{
            // Ensure that we have a collection of pages
    if (pages.Any())
    {
        // Get the first page in pages and get the level
        var naviLevel = pages.First().Level;

        // Add in level for a CSS hook
    <ul class="meny dropdown-menu sublevel level-@(naviLevel)">
        @foreach (var page in pages)
        {
            <li>
                <a href="@page.Url">@page.Name</a>

                //if the current page has any children
                @if (page.Children.Any())
                {
                    // Call our helper to display the children
                    @childPages(page.Children)
                }
            </li>
        }
    </ul>

    }
}
        </li>
    }
    else
    {
                <li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
                    <a href="@childPage.Url">@childPage.Name</a>
                </li>
            }
        }
    </ul>
}

的CSS：

    nav {
        z-index: 999;
        background: rgba(0, 0, 0, 0.95);
        text-align: right;
        left: 0px;
        right: 0px;
        display: block;
        position: relative;
        transition: height 300ms ease-in-out;
        text-align:center;
    }

    nav > ul {
        padding: 5px;
        position: relative;
        display: inline-table;
        width: 100%;
    }

    nav > ul li {
        position: relative;
        font-family: "Lato", sans-serif;

    }

    .nav a {
        display: inline-block;
    }

    nav > ul li a,
    nav > ul li span {
        cursor: pointer;
        display: inline-block;
        padding: 40px;
        padding-top: 5px;
        font-size: 20px;
        font-weight: 500;
        color: #000000;
        border-right: 1px solid #000000;

    }

    nav > ul li a:hover,
    nav > ul li span:hover {
        color: #0066FF;
    }

    nav > ul li span {
        cursor: default;
    }

    nav > ul li:after {
        content: "";
        clear: both;
        display: block;
    }

    nav > ul li.selected > a,
    nav > ul li.selected span {
        color: #000000;
        font-weight: 700;
    }

    nav li > ul {
        position: absolute;
    }

    nav li > ul li {
        float: none;
        display: block;
        position: relative;
    }

    nav li > ul li a {
        font-size: 17px;
        padding: 15px 15px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
    }

    nav li > ul li a:hover {
        color: #fff;
    }

    nav li > ul > li > ul {
        left: 100%;
        top: 0;
        display: none;
    }
nav {
    margin: 0 auto;
    background: none;
    width: 100%;
}

nav > ul {
    padding-right: 0;
    width: auto;
    text-align: center;
}

nav > ul li {
    float: left;
}

nav > ul li a,
nav > ul li span {
    font-size: 15px;
}

nav > ul li:last-child a {
    padding-right: 0;
}

nav li > ul {
    left: 0;
    top: 75%;
    display: none;
    white-space: nowrap;
    height: auto;
    margin-bottom: 0;
    margin-left: 10px;
    text-align: left;
    background: rgba(0, 0, 0, 0.8);
    padding: 5px 8px 5px 0;
}

nav li > ul li a {
    padding: 8px 15px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
}

Answer 1

您可以使用此css根据参考图像进行布局（您需要根据您的设计更改高度和字体大小和颜色）

<?php 

foreach($secondArray as $catKey => $cat){

    foreach($cat as $key=>$val){
        $categoryName = $key;
        $quantity = $val;
    }

    foreach($thirdArray as $catDetails){
        if($catDetails['variant_dtl_name'] == $categoryName){
            $secondArray[$catKey]['price'] = $catDetails['variant_dtl_price'] * $quantity;
            $price[] = $catDetails['variant_dtl_price'] * $quantity;
        }
    }
}

print_r($secondArray);

//Since You needed the total, you can do this.
    echo array_sum($price);
    ?>

Answer 2

您应该删除padding-top并从中删除padding nav > ul li a, nav > ul li span。

nav > ul li a, nav > ul li span {
  cursor: pointer;
  display: inline-block;
  padding: 14px; /* decrease padding */
  /* padding-top: 5px; */
  font-size: 20px;
  font-weight: 500;
  color: #000000;
  border-right: 1px solid #000000;
}

将文本居中在导航框内

2 个答案: