Question

这是html

     <!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="layout-style.css" type="text/css">
<title>Filmregister</title>

</head>


<body>

<header>
<h2>Filmregister</h2>

<!--MENYBAR-->

<div id="nav">

<ul id="navlist">
<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>


<!--FLEKSBOKS-->



<!--SISTE LÅNTE-->
<main>
<div class="panel main-content"> <h5>Siste lånte<h5> </div>

<!--SISTE FILMER-->

<div class="panel left"> <h5>Tilgjengelige filmer<h5>

<ul id="tilgjengelige">

<li> <img src="The_Intouchables_3.jpg" width="100" height="140"> </li>
<li> <img src="The_Lunchbox_1.jpg" width="100" height="140"> </li>
</ul>
</div>

<!--ANBEFALINGER-->

<div class="panel right"> <h5>Anbefalinger<h5> </div>
</main>

<!--RUTINER-->

<footer>Rutiner</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>


<!-- SØKEBAR -->

<div id="searchbar">

<pre><form id="tfnewsearch" method="get" action=""><input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton"></form></pre>
<div class="tfclear"></div>
</div>



</body>
</html>

css：

html

/*FLEXBOX*/

{
    font-family: "Arsenal", "Times New Roman";
}

body {
    background: #364949;
    margin: 0;
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #999999;
    height: 50px;
    padding-right: 100px;

}

main {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.panel {
    height: 500px;
    flex: 1;
}

.main-content {
    background:     #999999;
    flex-grow: 2;
    order: 2;
    color: white;
    font-family: Arial, Helvetica, sans-serif; 
}

.left {
    background: #999999;
    order: 1;
    margin: 20px;
    color: white;
    font-family: Arial, Helvetica, sans-serif; 
}

.tilgjengelige {


}


.right {
    background: #999999;
    order: 3;
    margin: 20px;
    color: white;
    font-family: Arial, Helvetica, sans-serif; 

}

footer {
    background: #999999;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

/*MENYBAR*/

#nav {
    background-color: #999999;
    position: fixed;
    top:0px;
    padding-left: 85px;
    height: 50px;
    overflow: hidden;
    margin-top: -5px;
    left: -90px;


}

#navlist {
    display: inline-block;
    background-color: #999999;
    padding-right: 100px;
    height: 50px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 5px;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #999999;

}

li {
    float: left;
}

li a {
    display:block;
    text-decoration: none;
    text-align: center;
    padding: 15px 20px;
    color: white;
    cursor:pointer;

}

li a:hover {
    background-color:#364949;
}
.active {
    background-color:#364949;
}


/* LOG IN*/

form {
    float:right;
    font-family: Arial, Helvetica, sans-serif;
}

.login {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 50%;
    display: inline-block;
}


/*SØKEBAR*/

#searchbar {
    position: absolute;
    left: 150px;
    top: 60px;

}

因为我正在使用ul和li，所以图片应该在右边相互之间（它在一个弹性框btw中），但由于某种原因我不能让它工作？

注意：我现在已经添加了我的整个代码。可以自由评论其他改进:)它应该是一个电影页面，但我还没有添加任何JavaScript。它只是壳:)）

Answer 1

尝试从CSS中删除它：

li {
    float: left;
}

无法在flexbox中获取图片

1 个答案: