Css 无法内联导航菜单_Css - Fatal编程技术网

Css 无法内联导航菜单

css

Css 无法内联导航菜单,css,Css,我需要帮助来排列我的导航菜单。当前它显示为垂直，但我希望它显示为右上角的水平。我知道如何将更传统的导航设置为水平，但在工具中有一个部分，其中有3个部分是块我正在对“工具”部分进行更改，因为该下拉列表中有太多链接，看起来像是一个直接的下拉列表，所以我试图使“工具”下拉列表有三个块如果它不是我缺少的简单的东西，我可以找到一个模板并用它重建它。提前感谢 <style> li { list-style-type: none; display-inline; } a { font-siz

我需要帮助来排列我的导航菜单。当前它显示为垂直，但我希望它显示为右上角的水平。我知道如何将更传统的导航设置为水平，但在工具中有一个部分，其中有3个部分是块

我正在对“工具”部分进行更改，因为该下拉列表中有太多链接，看起来像是一个直接的下拉列表，所以我试图使“工具”下拉列表有三个块

如果它不是我缺少的简单的东西，我可以找到一个模板并用它重建它。提前感谢

<style>
li {
list-style-type: none;
display-inline;
}

a {
font-size: 14pt;
color: ;
}

#tools-title {
color: #fff;
}

#container{
width: 45%;
border: 1px solid #000;
padding: 15px;
background-color: #333;
}

#left{
float:left;
width:250px;
border-right: 1px solid #000;
}

#left a{
display: block;
}

#right{
float: right;
width: 250px;
}

#right a{
display: block;
}

#center{
margin:0 auto;
width:250px;
border-right: 1px solid #000;
}

#center a{
display: block;
}
</style>

<body>

<ul class="nav">
<li class="nav-list">

<ul class="nav-resources">
<li class="button-dropdown">
    <a href="javascript:void(0)" class="dropdown-toggle"><img src="resources.png" title="Resources"><span>&#9662;</span></a>
    <ul class="dropdown-menu">
      <li>
        <a href="#" target="_blank">Test Task</a>
       <a href="#" target="_blank">QA Training</a>
       <a href="#" target="_blank">App Contact List</a>
      </li>
    </ul>
  </li>
</ul>

<ul class="nav-guides">
<li class="button-dropdown">
    <a href="javascript:void(0)" class="dropdown-toggle">
      <img src="info.png" title="Guides"><span>&#9662;</span>
    </a>
    <ul class="dropdown-menu">
      <li>
        <a href="Index/howto.html" target="_blank">Edit Links</a>
      </li>
    </ul>
    </li>
</ul>

<ul class="nav-tools">
<li class="button-dropdown">
    <a href="javascript:void(0)" class="dropdown-toggle"><img src="tools.png" title="Tools"><span>&#9662;</span></a>
        <ul class="dropdown-menu">
            <div id="container">
            <h3 id="tools-title">Tools Menu</h3>
                <div id="left">
                    <li>
                        <a href="#" target="_blank">Application Logger</a>
                        <a href="#" target="_blank">Application Logger Dev</a>
                        <a href="#" target="_blank">Contract Search</a>
                        <a href="#" target="_blank">New Payment Lookup Tool</a>
                        <a href="#" target="_blank">New Payment Lookup Tool Dev</a>
                    </li>
                </div>
                <div id="right">
                    <li>
                        <a href="#" target="_blank">U-Haul Exception Viewer Dev 2</a>
                        <a href="#" target="_blank">Uhaul.net Exception Viewer</a>
                        <a href="#" target="_blank">WB Management</a>
                        <a href="#" target="_blank">WB Management Dev</a>
                    </li>
                </div>
                <div id="center">
                    <li>
                        <a href="#" target="_blank">QA Tool</a>
                        <a href="#" target="_blank">QA Tool Dev</a>
                        <a href="#" target="_blank">U-Haul Exception Viewer</a>
                        <a href="#">U-Haul Exception Viewer Dev</a>
                        <a href="#" target="_blank">U-Haul Exception Viewer 2</a>
                    </li>
                </div>
            </div>
        </ul>
    </li>
</ul>

<ul class="nav-about">
<li>
<a href="#" id="myBtn"><img src="about.png" title="About"></a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>QA Application Hub</h2>
    </div>
    <div class="modal-body">
      <p>Version: 1.0.0</p>
      <p>Last updated: 6/7/17</p>
      <p>Created by: Mark White</p>
    </div>
  </div>
</li>
</ul>




<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

<ul class="nav-mail">
<li>
    <a href="mailto:someone@email.com"><img src="mailicon.png" style="width: 32px; height: 40px;" title="Send Mail"></a>
</li>
</ul>

</li>
</ul> 
</body>


李{
列表样式类型：无；
内联显示；
}
a{
字号：14pt；
颜色：；
}
#工具标题{
颜色：#fff；
}
#容器{
宽度：45%；
边框：1px实心#000；
填充：15px；
背景色：#333；
}
#左{
浮动：左；
宽度：250px；
右边框：1px实心#000；
}
#留下{
显示：块；
}
#对{
浮动：对；
宽度：250px；
}
#对{
显示：块；
}
#居中{
保证金：0自动；
宽度：250px；
右边框：1px实心#000；
}
#中心a{
显示：块；
}





















工具菜单











&时代；
QA应用中心
版本：1.0.0
最后更新：6/7/17
创建人：马克·怀特


//获取模态
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

您的html有点问题，我已经纠正了，请参考

要使导航栏处于水平布局，需要在

ul

中添加

dispaly:flex

css属性，以便灵活的框根据屏幕大小进行渲染

var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

。水平导航{
显示器：flex；
/*float:right；*/*如果您希望所有项目都位于右侧*/
}
李{
列表样式类型：无；
内联显示；
}
a{
字号：14pt；
颜色：；
}
#工具标题{
颜色：#fff；
}
#容器{
宽度：45%；
边框：1px实心#000；
填充：15px；
背景色：#333；
}
#左{
浮动：左；
宽度：250px；
右边框：1px实心#000；
}
#留下{
显示：块；
}
#对{
浮动：对；
宽度：250px；
}
#对{
显示：块；
}
#居中{
保证金：0自动；
宽度：250px；
右边框：1px实心#000；
}
#中心a{
显示：块；
}

















工具菜单









&时代；
QA应用中心
版本：1.0.0
最后更新：6/7/17
创建人：马克·怀特

这确实使其水平，但问题是它改变了“工具”菜单下拉列表的布局。最终目标是一个水平菜单和工具下拉菜单，与我在原始问题中添加的图像相同。尝试为此做一些css更改，因为您尝试的

tools

下拉菜单也不正确。