无法内联导航菜单

时间：2017-06-09 18:13:55

标签： css

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

我正在对工具部分进行更改，因为在该下拉列表中有如此多的链接，它看起来很难看，只是直接下拉，所以我试图让工具下拉有三个块。

如果不是我想念的那么简单，我可能只是找到一个模板并用它重建它。先谢谢！

<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>

1 个答案:

答案 0 :(得分：1)

你的html很小，我已经纠正了，所以请参考。

要在水平布局中设置导航栏，需要在dispaly:flex中添加ul css属性，以便灵活方框将根据屏幕尺寸进行渲染。

＆＃13;
＆＃13; 
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";
    }
}
＆＃13; 
.horizontal-nav{
   display:flex;
   /*float:right;*/  /*If you want all the items on right side */
}

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;
}
＆＃13; 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="nav horizontal-nav">
	
	<li class="button-dropdown nav-resources">
		<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>

	<li class="button-dropdown nav-guides">
		<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>

	<li class="button-dropdown nav-tools">
		<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>

	<li class="nav-about">
		<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>
		</div>
	</li>

	<li class="nav-mail">

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


</ul>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题