javascript - 菜单中的输入框位置错误

标签 javascript jquery html css

我试图在栏的最右侧添加一个输入框，与那些菜单栏在同一行，但每次它的位置都不好或者根本不在那里。你能帮我吗？由于我的 JS 隐藏滚动功能，它需要在菜单栏中。我正在尝试使用 JQuery-ui 的 

DatePicker ("$(function() {
    $("#datepicker").datepicker();
});")

HTML:

  <nav>
<span class="nadpis"><a href="javascript:history.go(0)" style="text-transform: uppercase;"><?php echo $id_dom; ?></a></span>
<p>Date: <input type="text" id="datepicker"></p></span>
<ul class="nav">
  <li class="prve">
    <a href="#">PSI</a>
    <ul>
      <li>
        <a href="flvmena/meno1.html">Simoncik</a>
      </li>
      <li>
        <a href="flvmena/meno2.html">Kodrla</a>
      </li>
      <li>
        <a href="flvmena/meno3.html">Vajs</a>
      </li>
      <li>
        <a href="flvmena/meno4.html">Hrebicek</a>
      </li>
      <li>
        <a href="flcmena/meno1.html">Bednarikova</a>
      </li>
      <li>
        <a href="flcmena/meno2.html">Dobrikova</a>
      </li>
      <li>
        <a href="flcmena/meno3.html">Duracka</a>
      </li>
      <li>
        <a href="quamena/meno1.html">Klco</a>
      </li>
      <li>
        <a href="quamena/meno2.html">Cisar</a>
      </li>
    </ul>
  </li><!--
  --><li class="druhe">
    <a href="#">&#9776;</a>
    <ul>
      <li>
        <a href="index.php">RPO</a>
      </li>
      <li>
        <a href="flv.php?id_dom=flv">FLV</a>
        <ul>
          <li>
            <a href="flvmena/meno1.html">Simoncik</a>
          </li>
          <li>
            <a href="flvmena/meno2.html">Kodrla</a>
          </li>
          <li>
            <a href="flvmena/meno3.html">Vajs</a>
          </li>
          <li>
            <a href="flvmena/meno4.html">Hrebicek</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="flv.php?id_dom=FLC">FLC</a>
        <ul>
          <li>
            <a href="flcmena/meno1.html">Bednarikova</a>
          </li>
          <li>
            <a href="flcmena/meno2.html">Dobrikova</a>
          </li>
          <li>
            <a href="flcmena/meno3.html">Duracka</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="flv.php?id_dom=QUA">QUA</a>
        <ul>
          <li>
            <a href="quamena/meno1.html">Klco</a>
          </li>
          <li>
            <a href="quamena/meno2.html">Cisar</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="flv.php?id_dom=HFX">HFX</a>
      </li>
      <li>
        <a href="flv.php?id_dom=PDT">PDT</a>
      </li>
      <li>
        <a href="flv.php?id_dom=RSH">RSH</a>
      </li>
      <li>
        <a href="flv.php?id_dom=BUR">BUR</a>
      </li>
      <li>
        <a href="suhrn.php?id_dom=SUHRN" style="color: #ea9b54">SUHRN</a>
      </li>
      <li>
        <a href="suhrn.php?id_dom=INCI" style="color: #ea9b54">INCI</a>
      </li>
      <li>
        <a href="suhrn.php?id_dom=JIRA" style="color: #ea9b54">JIRA</a>
      </li>
      <li>
        <a href="suhrn.php?id_dom=CHGT" style="color: #ea9b54">CHGT</a>
      </li>
      <li>
        <a href="flv.php?id_dom=TASK" style="color: #ea9b54">TASK</a>
      </li>
      <li>
        <a href="vrs.php" style="color: #ea9b54">VRS</a>
      </li>
    </ul>
  </li>
</ul>
</nav>

CSS:

nav {
display: inline-block;
position: fixed;
width: 100%;
text-align: center;
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}

nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}

.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}

.nav {
vertical-align: top;
display: inline-block;
width: 250px;
}

.nav li {
position: relative;
}

.nav > li {
display: inline-block;
}

.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}

.nav ul {
 position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}

.nav > li:hover > ul {
left: auto;
min-width: 100%;
}

.nav > li li:hover > ul {
left: 100%;
top: -1px;
}

.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}

.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
 min-width: 110px;
 border-right: 2px solid #81D4FA;
 }

.tretie {
right: 0;
}

最佳答案

检查这个fiddle .我所做的是，使您的 nav 显示为 block 。并使用 margin:auto 居中。然后在它旁边添加文本栏。使它 float 并使用 margin-top 我将它向上移动，所以它在正确的位置。 

<body>
  <!--MENU BAR!-->
  <nav>
    <span class="nadpis"><a href="javascript:history.go(0)" style="text-transform: uppercase;"><?php echo $id_dom; ?></a></span>
    <ul class="nav">
      <li class="prve">
        <a href="#">PSI</a>
        <ul>
          <li>
            <a href="flvmena/meno1.html">Simoncik</a>
          </li>
          <li>
            <a href="flvmena/meno2.html">Kodrla</a>
          </li>
          <li>
            <a href="flvmena/meno3.html">Vajs</a>
          </li>
          <li>
            <a href="flvmena/meno4.html">Hrebicek</a>
          </li>
          <li>
            <a href="flcmena/meno1.html">Bednarikova</a>
          </li>
          <li>
            <a href="flcmena/meno2.html">Dobrikova</a>
          </li>
          <li>
            <a href="flcmena/meno3.html">Duracka</a>
          </li>
          <li>
            <a href="quamena/meno1.html">Klco</a>
          </li>
          <li>
            <a href="quamena/meno2.html">Cisar</a>
          </li>
        </ul>
      </li><!--
   --><li class="druhe">
        <a href="#">&#9776;</a>
        <ul>
          <li>
            <a href="index.php">RPO</a>
          </li>
          <li>
            <a href="flv.php?id_dom=flv">FLV</a>
            <ul>
              <li>
                <a href="flvmena/meno1.html">Simoncik</a>
              </li>
              <li>
                <a href="flvmena/meno2.html">Kodrla</a>
              </li>
              <li>
                <a href="flvmena/meno3.html">Vajs</a>
              </li>
              <li>
                <a href="flvmena/meno4.html">Hrebicek</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="flv.php?id_dom=FLC">FLC</a>
            <ul>
              <li>
                <a href="flcmena/meno1.html">Bednarikova</a>
              </li>
              <li>
                <a href="flcmena/meno2.html">Dobrikova</a>
              </li>
              <li>
                <a href="flcmena/meno3.html">Duracka</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="flv.php?id_dom=QUA">QUA</a>
            <ul>
              <li>
                <a href="quamena/meno1.html">Klco</a>
              </li>
              <li>
                <a href="quamena/meno2.html">Cisar</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="flv.php?id_dom=HFX">HFX</a>
          </li>
          <li>
            <a href="flv.php?id_dom=PDT">PDT</a>
          </li>
          <li>
            <a href="flv.php?id_dom=RSH">RSH</a>
          </li>
          <li>
            <a href="flv.php?id_dom=BUR">BUR</a>
          </li>
          <li>
            <a href="suhrn.php?id_dom=SUHRN" style="color: #ea9b54">SUHRN</a>
          </li>
          <li>
            <a href="suhrn.php?id_dom=INCI" style="color: #ea9b54">INCI</a>
          </li>
          <li>
            <a href="suhrn.php?id_dom=JIRA" style="color: #ea9b54">JIRA</a>
          </li>
          <li>
            <a href="suhrn.php?id_dom=CHGT" style="color: #ea9b54">CHGT</a>
          </li>
          <li>
            <a href="flv.php?id_dom=TASK" style="color: #ea9b54">TASK</a>
          </li>
          <li>
            <a href="vrs.php" style="color: #ea9b54">VRS</a>
          </li>
        </ul>
      </li>
    </ul>
    <input type="text" class="tib" />
  </nav>


body,nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* menu*/
nav {
  display: inline-block;
  position: fixed;
  width: 100%;
  /* text-align: center; */
  background-color: #303036;
  vertical-align: top;
  top: -1px;
  opacity: 1;
  transition: .3s;
}
nav ul > li > a{
  text-align:center;
}
ul.nav{
  margin:auto;
}
nav:hover {
  opacity: 1 !important;
  transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
  left: 0;
  position: absolute;
  text-decoration: none;
  color: #FAFAC1;
  background-color: #303036;
  font-family: 'Helvetica Neue',sans-serif;
  font-size: 30px;
  font-weight: 700;
}

.nav a {
  display: block;
  background-color: #303036;
  color: #fff;
  text-decoration: none;
  padding: .7em 1.7em;
  text-transform: uppercase;
  font-size: 85%;
  letter-spacing: 3px;
  position: relative;
}

.nav {
  vertical-align: top;
  /* display: inline-block; */
  width: 250px;
}

.nav li {
  position: relative;
}

.nav > li {
  display: inline-block;
}

.nav li:hover > a {
  transition: .3s;
  background-color: #2e86ab;
  color: #8fc93a;
}

.nav ul {
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  left: -99999em;
  border: 2px solid #81D4FA;
  border-top: 1px solid #81D4FA;
}

.nav > li:hover > ul {
  left: auto;
  min-width: 100%;
}

.nav > li li:hover > ul {
  left: 100%;
  top: -1px;
}

.nav > li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent;
}

.nav li li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent;
  right: 10px;
}
/* Prvy menu bar*/
.prve {
  min-width: 100px;
  border: 2px solid #81D4FA;
  border-bottom: none;
  border-top: none;
}
/* Druhy menu bar */
.druhe {
  min-width: 110px;
  border-right: 2px solid #81D4FA;
}
.tib{
  float:right;
  margin-top:-28px;
}

关于javascript - 菜单中的输入框位置错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39073463/

上一篇：html - 在三个框的顶部显示 flex 标题

下一篇：javascript - 特定元素上的 Angular/HTML Glass-pane

相关文章：

javascript - getURLParameter 和 RegExp

javascript - gulp-usemin 不输出 js 文件

javascript - 如何在 react 中设置状态时更新数组中的项目

javascript - 动态 Angular 表不使用分页进行过滤

jQuery - 为什么属性没有被删除？ .removeAttr

javascript - 文件上传时调用函数

javascript - 水平向右滚动到元素

php - jQuery 正在剥离 HTML，我不知道为什么

html - 具有相同类名的两个表，但对类的更改仅应用于一个表

html - 圆 Angular 周围的盒子阴影？

©2024 IT工具网  联系我们