Question

我的左上角有一个菜单栏，但悬停和活动元素不会覆盖整个文本。我对此很新，而且页面没有完成，所以不需要指出它看起来有多糟糕哈哈。整个页面都是挪威语，所以它可能有点令人困惑。它应该是一种电影注册，我知道它可能在我的代码中有很多错误，但我现在想弄清楚的问题是悬停和活动：）

这是我的HTML：

$('modal4<%=@comment.content_id%>').modal('hide');

和css：

    <!--MENUBAR-->

        <div id="nav">
          <ul class="first">

            <li><a class="active" href="startside.html">Startside</a>
            </li>
            <li><a href="minelån.html">Mine lån</a>
            </li>
            <li><a href="Minliste.html">Min liste</a>
            </li>
          </ul>
        </div>

      </header>

      <!-- LOGIN -->

      <form>
        <span class='login'>

        <label for="E-postadresse">E-postadresse</label>
        <input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />

        <label for="Passord">Passord</label>
        <input type="password" placeholder="Passord" id="Passord" />

        <input type="submit" value="Logg inn" />
        </span> 
      </form>
    </body>

    </html>

<!-- end snippet -->

Answer 1

你应该像这样删除li元素之间的空格

<ul class="first">

    <li><a class="active" href="startside.html">Startside</a>
    </li><li><a href="minelån.html">Mine lån</a>
    </li><li><a href="Minliste.html">Min liste</a></li>
  </ul>

这就像li元素之间的空格一样，如果它们在新行上输入，也会有div。（如果解释错误，我很抱歉。）

Answer 2

＆＃13;

html
/*FLEXBOX*/

{
  font-family: "Arsenal", "Times New Roman";
}
body {
  background: #333333;
  margin: 0;
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #999999;
  height: 50px;
  padding-right: 100px;
}
/*SISTE LÅNTE*/

main {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.main {
  background: #999999;
  flex-grow: 1;
  order: 2;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
.main h5 {
  padding-left: 10px;
}
/*TILGJENGELIGE FILMER*/

.left {
  background: #999999;
  flex-grow: 1;
  order: 1;
  margin: 20px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
.left h5 {
  padding-left: 10px;
}
/*ANBEFALINGER*/

.right {
  background: #999999;
  flex-grow: 1;
  order: 3;
  margin: 20px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
.left,
.right,
.main {
  margin: 20px 20px;
  border-style: solid;
  border-color: black;
  border-width: 5px 5px 5px 5px;
}
.right h5 {
  padding-left: 10px;
}
/*RUTINER*/

footer {
  background: #999999;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 155px;
  margin: 20px;
  margin-top: 0px;
  padding: 10px;
  color: white;
  border-style: solid;
  border-color: black;
  border-width: 5px 5px 5px 5px;
}
/*MENUBAR*/

#nav {
  background-color: #999999;
  position: absolute;
  top: 0px;
  padding-left: 85px;
  height: 50px;
  overflow: hidden;
  margin-top: -5px;
  left: -90px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #999999;
}
.first li {
  display: inline-block;
}
li a {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  padding: 15px 20px;
  color: white;
  cursor: pointer;
}
li a:hover {
  background-color: #ddd;
}
li a:active {
  background-color: #ccc;
}
/* LOG IN*/

form {
  float: right;
  font-family: Arial, Helvetica, sans-serif;
}
.login {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 50%;
  display: inline-block;
}
input {
  font-size: 90%;
}
/*ALLE FILMER*/

.movie1 {
  display: flex;
}
.movie1 img {
  padding: 10px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
  <link rel="stylesheet" href="Startside.css" type="text/css">


  <title>Filmregister</title>
</head>

<body>
  <header>
    <h2>Filmregister</h2>





    <!--MENUBAR-->

    <div id="nav">
      <ul class="first">

        <li><a class="active" href="startside.html">Startside</a>
        </li>
        <li><a href="minelån.html">Mine lån</a>
        </li>
        <li><a href="Minliste.html">Min liste</a>
        </li>
      </ul>
    </div>

  </header>






  <!--SISTE LÅNTE-->

  <main>

    <div class="main">
      <h5>Siste lånte</h5>
      <div class="movies">




        <div class="movie1">
          <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/Valkyrie.html">
            <img src="valkyrie1.jpg" width="100" height="140" alt="Valkyrie">
          </a>
          <small>
    <br>
    Utgitt: 2008
    <br>
    Bryan Singer
    <br>
    Krig
    <br>
    Film(dvd-video)
    </small>
        </div>




        <div class="movie1">
          <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/MinorityReport.html">
            <img src="MinorityReport3.jpg" width="100" height="140" alt="MinorityReport">
          </a>
          <small>
    <br>
    Utgitt: 2002
    <br>
    Steven Spielberg
    <br>
    Sci-fi
    <br>
    Film(dvd-video)
    </small>
        </div>




      </div>
    </div>








    <!--TILGJENGELIGE FILMER-->

    <div class="left">
      <h5>Tilgjengelige filmer</h5>

      <div class="movies">






        <div class="movie1">
          <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Intouchables.html">
            <img src="TheIntouchables3.jpg" width="100" height="140" alt="The-Intouchables">
          </a>

          <small>
    <br>
    Utgitt: 2011 
    <br>
    Olivier Nakache / Eric Toledano
    <br>
    Drama, biografi, komedie
    <br>
    Film(dvd-video)
    </small>
        </div>




        <div class="movie1">
          <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Lunchbox.html?E-postadresse=">
            <img src="TheLunchbox1.jpg" width="100" height="140" alt="The-Lunchbox">
          </a>

          <small>
    <br>
    Utgitt: 2013
    <br>
    Ritesh Batra
    <br>
    Romanse, komedie
    <br>
    Film(dvd-video)
    </small> 
        </div>

      </div>
    </div>






    <!--ANBEFALINGER-->

    <div class="right">
      <h5>Anbefalinger</h5> 
      <div class="movies">


        <div class="movie1">
          <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Intouchables.html">
            <img src="TheIntouchables3.jpg" width="100" height="140" alt="The-Intouchables">
          </a>

          <small>
    <br>
    Utgitt: 2011 
    <br>
    Olivier Nakache / Eric Toledano
    <br>
    Drama, biografi, komedie
    <br>
    Film(dvd-video)
    </small>
        </div>


        <div class="movie1">
          <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/Valkyrie.html">
            <img src="valkyrie1.jpg" width="100" height="140" alt="Valkyrie">
          </a>
          <small>
    <br>
    Utgitt: 2008
    <br>
    Bryan Singer
    <br>
    Krig
    <br>
    Film(dvd-video)
    </small>
        </div>


      </div>
    </div>

  </main>







  <!--RUTINER-->

  <footer>
    <strong>Rutiner</strong>
    <ul id="rutiner">
      <br>
      <li> <small> 1. Følgende kan låne: staben ved Institutt for informasjons- og medievitenskap, studenter ved instituttet, på grunnlag av faglig begrunnelse, andre ved UiB etter særlig avtale for et avgrenset tidsrom eller for et avgrenset prosjekt.</small>
      </li>

      <li> <small> 2. Bestillinger vil bli effektuert hver arbeidsdag mellom klokken 14:00 og 15:00.</small>
      </li>

      <li><small> 3. Ansatte ved instituttet får filmen lagt i posthyllen, studenter og andre får tilbakemelding om hvor og når filmen kan hentes.</small>
      </li>

      <li> <small> 4. For alt utlån gjelder en generell regel om lånetid på 1 uke, som kan forlenges med ytterligere en uke. Ønskes en film lånt over en lengre periode må dette begrunnes, og hver enkelt forespørsel vil bli vurdert. </small>
      </li>

      <li> <small> 5. Film skal leveres tilbake i posthyllen merket retur av film.</small>
      </li>

    </ul>
  </footer>






  <!-- LOGIN -->

  <form>
    <span class='login'>
    
    <label for="E-postadresse">E-postadresse</label>
    <input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
    
    <label for="Passord">Passord</label>
    <input type="password" placeholder="Passord" id="Passord" />
    
    <input type="submit" value="Logg inn" />
    </span> 
  </form>




</body>

</html>

＆＃13;

Answer 3

将一个width和height属性添加到anchor元素应修复它：

window.onload = function () {
    getLocation(function () {
        alert(lng);
    });
};

function getLocation(callback) {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function () {
            showPosition();
            callback();
        });
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

var lat;
var lng;

function showPosition(position) {


  lat = position.coords.latitude.toFixed(3);
  lng = position.coords.longitude.toFixed(3);

    alert(lng); //alert done correctly

    var centerMap = new google.maps.LatLng(lat,lng);
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: centerMap
    });
    directionsDisplay.setMap(map);
     calculateAndDisplayRoute(directionsService, directionsDisplay);
    document.getElementById('mode').addEventListener('change', function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    });

}

悬停效果：

li a { width: auto;  height: auto; }

注意：每次单击元素时都会触发活动效果。因此，在重新加载页面后，它不会产生任何效果。

悬停不包括整个文本

3 个答案: