导航栏子菜单未居中答案

【问题标题】：Nav Bar Sub-Menu not centered导航栏子菜单未居中
【发布时间】：2019-10-06 16:32:52
【问题描述】：

我有一个带有下拉子菜单的导航栏。 div 用于使页面在屏幕上居中。显示下拉菜单时 - 它显示在我想将页面约束到的 div 之外。我无法将下拉菜单居中。

我附上了一个 jsfiddle 来显示问题 https://jsfiddle.net/JHinkle/n4crd619/18/

将鼠标悬停在“输出”或“其他”菜单上，然后看到菜单栏移动到屏幕的最左侧，而不是与导航栏的左侧对齐

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hinks_Config</title>
<link rel="stylesheet" type="text/css" href="Project.css">
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js" charset="UTF-8">
</script><script src="jquery-3.4.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script type="text/javascript">

</script>
</head>

<body>
<div class="IEcontent">
<div class="content">

     <div class="navbar">

         <a href="index.htm" >Status</a>     

       <div class="subnav">
         <button class="subnavbtn">Network Config <i class="fa fa-caret-down"></i></button>
         <div class="subnav-content">
         <a href="Network.htm">Wired / Ethernet</a>                   
         <a href="WIFI.htm">Wireless / WIFI</a>
         </div>
       </div> 

         <a href="E131.htm" >E131 / Artnet</a>

       <div class="subnav">
         <button class="subnavbtn">Output Settings <i class="fa fa-caret-down"></i></button>
         <div class="subnav-content">
         <a id="PC1" href="PortConfig_1.htm">String Ports 1 - 16</a>                      
         <a id="PC2" href="PortConfig_2.htm">String Ports 17 - 32</a>
         <a id="PC3" href="PortConfig_3.htm">String Ports 33 - 48</a>
         <a href="DMX.htm">DMX / RS485</a>                  
         </div>
       </div> 

       <div class="subnav">
         <button class="subnavbtn">Misc Settings <i class="fa fa-caret-down"></i></button>
         <div class="subnav-content">
         <a href="FM.htm">FM Transmitter</a>
         <a href="Mode.htm">Operating Mode</a>
         <a href="Time.htm">Time</a>                    
         <a href="Firmware.htm">Active Firmware</a>
         <a href="Debug.htm">Technical</a>
         </div>
       </div>

         <a href="Test.htm" >Test</a>
         <a href="Reset.htm" >Activate Changes</a>


     </div>
    <br />




</div>
</div>
</body>
</html>

div.content 
{
    width: 960px;
    margin: auto;
}

div.IEcontent 
{
   text-align: center;
}


legend {
    margin: 0 auto;
}

tr:hover {
    color: #261F1D;
    background-color: #E5C37E;
}

.highlighted {
    color: #261F1D;
    background-color: #E5C37E;
}


.active_RED {
    color: #261F1D;
    background-color: yellow;
}

table 
{
    width: 100%;
    table-layout: fixed;
 }

th 
{
    height: 15px;
    font-weight: bold;
    font-size: 10px;
    text-align: center;
   background-color: yellow;

}


table, td , th
{
    border: 1px solid black;
    border-collapse: collapse;

}

td 
{
    text-align: center;
    height: 15px;
    font-size: 10px;
    white-space: pre;
}



.controlgroup-textinput{
    padding-top: .10em;
    padding-bottom: .10em;
}


.containing-element .ui-slider-switch { width: 10em !important; }



body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #333;
    width: 960px;

}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn 
{
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


.subnav-content a 
{
  float: left;
  color: white;
  text-decoration: none;
}


.navbar a:hover, .subnav:hover .subnavbtn 
{
  background-color: red;

}

.subnav-content {
  display: none;
  position: absolute;
  float: left;
  background-color: red;
  width: inherit;
   z-index: 1;
}


.subnav-content a:hover 
{
  background-color: #eee;
  color: black;
}

.subnav:hover .subnav-content {
  display: block;
}

input[type=text_Width] {
  width: 10%;
}

input.button_Joe1
{
     width: 15%;
}

.clear
{
    clear: both;
  }

.inlineinput div 
{
    display: inline;
}

#SmartDiff_Table1
{
  width: 30%;
  margin-left: 15%;
}

#SmartDiff_Table2
{
  width: 30%;
  margin-left: 15%;
}

#SmartDiff_Table3
{
  width: 30%;
  margin-left: 15%;

}
#SmartDiff_Table4
{
  width: 30%;
  margin-left: 15%;

}

.btnmainPOS
{
  background-color: #AAFFAA;
}

.btnmainMINUS
{
  background-color: #FF8080;
}

【问题讨论】：

那是因为你设置了 .subnav-content left: 0. 尝试删除该属性。

标签： html css

【解决方案1】：

只需添加样式位置：相对于 div.content

div.content 
{
    width: 960px;
    margin: auto;
    position: relative;
}

【讨论】：

【解决方案2】：

您可以使用此代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hinks_Config</title>
    <link rel="stylesheet" type="text/css" href="Project.css">
    <style type="text/css">
        div.content {
            width: 960px;
            margin: auto;
        }

        div.IEcontent {
            text-align: center;
        }

        legend {
            margin: 0 auto;
        }

        tr:hover {
            color: #261F1D;
            background-color: #E5C37E;
        }

        .highlighted {
            color: #261F1D;
            background-color: #E5C37E;
        }

        .active_RED {
            color: #261F1D;
            background-color: yellow;
        }

        table {
            width: 100%;
            table-layout: fixed;
        }

        th {
            height: 15px;
            font-weight: bold;
            font-size: 10px;
            text-align: center;
            background-color: yellow;
        }

        table,
        td,
        th {
            border: 1px solid black;
            border-collapse: collapse;
        }

        td {
            text-align: center;
            height: 15px;
            font-size: 10px;
            white-space: pre;
        }

        .controlgroup-textinput {
            padding-top: .10em;
            padding-bottom: .10em;
        }

        .containing-element .ui-slider-switch {
            width: 10em !important;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
        }

        .navbar {
            overflow: hidden;
            background-color: #333;
            width: 960px;
        }

        .navbar a {
            float: left;
            font-size: 16px;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .subnav {
            float: left;
            overflow: hidden;
        }

        .subnav .subnavbtn {
            font-size: 16px;
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: inherit;
            font-family: inherit;
            margin: 0;
        }

        .subnav-content a {
            float: left;
            color: white;
            text-decoration: none;
            display: block;
            clear: both;
        }

        .navbar a:hover,
        .subnav:hover .subnavbtn {
            background-color: red;
        }

        .subnav-content {
            display: none;
            position: absolute;
            float: left;
            background-color: red;
            width: 143px;
            z-index: 1;
        }

        .subnav-content a:hover {
            background-color: #eee;
            color: black;
        }

        .subnav:hover .subnav-content {
            display: block;
        }

        input[type=text_Width] {
            width: 10%;
        }

        input.button_Joe1 {
            width: 15%;
        }

        .clear {
            clear: both;
        }

        .inlineinput div {
            display: inline;
        }

        #SmartDiff_Table1 {
            width: 30%;
            margin-left: 15%;
        }

        #SmartDiff_Table2 {
            width: 30%;
            margin-left: 15%;
        }

        #SmartDiff_Table3 {
            width: 30%;
            margin-left: 15%;
        }

        #SmartDiff_Table4 {
            width: 30%;
            margin-left: 15%;
        }

        .btnmainPOS {
            background-color: #AAFFAA;
        }

        .btnmainMINUS {
            background-color: #FF8080;
        }
    </style>
</head>
<body>
    <div class="IEcontent">
        <div class="content">
            <div class="navbar">
                <a href="index.htm">Status</a>
                <div class="subnav">
                    <button class="subnavbtn">Network Config <i class="fa fa-caret-down"></i></button>
                    <div class="subnav-content">
                        <a href="Network.htm">Wired / Ethernet</a>
                        <a href="WIFI.htm">Wireless / WIFI</a>
                    </div>
                </div>
                <a href="E131.htm">E131 / Artnet</a>
                <div class="subnav">
                    <button class="subnavbtn">Output Settings <i class="fa fa-caret-down"></i></button>
                    <div class="subnav-content">
                        <a id="PC1" href="PortConfig_1.htm">String Ports 1 - 16</a>
                        <a id="PC2" href="PortConfig_2.htm">String Ports 17 - 32</a>
                        <a id="PC3" href="PortConfig_3.htm">String Ports 33 - 48</a>
                        <a href="DMX.htm">DMX / RS485</a>
                    </div>
                </div>
                <div class="subnav">
                    <button class="subnavbtn">Misc Settings <i class="fa fa-caret-down"></i></button>
                    <div class="subnav-content">
                        <a href="FM.htm">FM Transmitter</a>
                        <a href="Mode.htm">Operating Mode</a>
                        <a href="Time.htm">Time</a>
                        <a href="Firmware.htm">Active Firmware</a>
                        <a href="Debug.htm">Technical</a>
                    </div>
                </div>
                <a href="Test.htm">Test</a>
                <a href="Reset.htm">Activate Changes</a>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js" charset="UTF-8">
    </script>
    <script src="jquery-3.4.1.min.js"></script>
</body>
</html>

【讨论】：