5
Dưới đây là toàn bộ mã html:Trong css, làm cách nào để có được một danh sách nằm ngang và một danh sách theo chiều dọc?
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;
}
/*LAST RENTED*/
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;
}
/*LAST MOVIES*/
.left {
background: #999999;
order: 1;
margin: 20px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
/*RECOMMONDATIONS*/
.right {
background: #999999;
order: 3;
margin: 20px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
/*RULES*/
footer {
background: #999999;
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 155px;
margin: 20px;
margin-top: 0px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
/*MENUBAR*/
#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 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;
}
li {
float: none;
padding-right: 10px;
{<!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>
<!--MENUBAR-->
<div id="nav">
<ul id="navlist">
<li><a class="active" href="Main page.html">Mainpage</a>
</li>
<li><a href="mymovies.html">My movies</a>
</li>
<li><a href="mylist.html">My list</a>
</li>
</ul>
</div>
</header>
<!--FLEXBOX-->
<!--LAST RENTED-->
<main>
<div class="panel main-content">
<h5>Last rented<h5>
<ul id="rented">
<li><img src="valkyrie1.jpg" width="100" height="140"></li>
<li><img src="MinorityReport3.jpg" width="100" height="140"></li>
</ul>
</div>
<!--LAST MOVIES-->
<div class="panel left"><h5>LAST MOVIES<h5>
<ul id="last">
<li> <img src="TheIntouchables3.jpg" width="100" height="140"> </li>
<li> <img src="TheLunchbox1.jpg" width="100" height="140"> </li>
</ul>
</div>
<!--RECOMMONDATIONS-->
<div class="panel right"> <h5>Recommondations<h5>
<ul id="recommondations">
<li><img src="TheIntouchables3.jpg" width="100" height="140""></li>
<li> <img src="valkyrie1.jpg" width="100" height="140"></li>
</ul>
</div>
</main>
<!--RULES-->
<footer>RULES
<ol id="rules">
<li> <small> 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.
<li> Bestillinger vil bli effektuert hver arbeidsdag mellom klokken 14:00 og 15:00.
<li> Ansatte ved instituttet får filmen lagt i posthyllen, studenter og andre får tilbakemelding om hvor og når filmen kan hentes.
<li> 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.
<li> Film skal leveres tilbake i posthyllen merket retur av film.</small></li>
</ol>
</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>
<!-- SEARCHBAR -->
<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>Tôi đang sử dụng danh sách-thẻ trong ba phần khác nhau của mã html, trong thanh menu, trong flexbox trái và trong các quy tắc . Điểm sử dụng danh sách trong hộp bên trái là để hình ảnh cho phim sẽ được đặt dọc bên trong nó, hoặc trên đầu trang của mỗi khác. Điều đó cũng đi cho văn bản trong phần "QUY TẮC". Nhưng danh sách thanh thực đơn được cho là nằm ngang. Tính đến bây giờ tất cả họ đều phản ứng với cùng một thẻ css, vì vậy thay vì chỉ menubar đi horizantal họ tất cả đi ngang. Phải có điều gì đó sai trong mã của tôi, bởi vì tôi đã cố gắng gọi id cá nhân của họ nhưng họ sẽ không trả lời, họ chỉ trả lời khi tôi sử dụng thẻ li {} và sau đó cả ba đều làm như vậy. Bất cứ ai có thể giúp tôi ra khỏi đây?
Tôi không hiểu. Các flexbox trái và "quy tắc" phần là danh sách theo chiều dọc, không theo chiều ngang. http://codepen.io/anon/pen/ZLoZYb –
Có một thời gian thực sự khó khăn để hiểu vấn đề thực tế là gì ở đây. –
vâng tôi nghĩ haha ngược lại! Còn lại và quy tắc nơi dọc khi họ được cho là ngang, nhưng tôi đã tìm ra nó nên không phải lo lắng :) – In6ify