在css中，如何将一个列表设置为水平列表，将一个列表设置为垂直列表？

问题描述 投票：5回答：1

这是整个HTML代码：

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>

我在html代码的三个不同部分，菜单栏，左侧弹性框和规则中使用了list-tag。在左侧弹性框中使用列表的目的是使电影的图像垂直放置在其中，或者彼此叠加。这也适用于“规则”部分的文字。但是菜单栏列表应该是水平的。截至目前，它们都响应相同的css标签，因此不仅仅是菜单栏处于水平，它们都是水平的。在我的代码中一定有问题，因为我已经尝试调用他们的个人id但他们不会回复它，他们只在我自己使用li {}标签时才会响应，然后他们三个都这样做。谁能帮到我这里？

html css flexbox
1个回答
0
投票

您可以使用flex-direction指定其流量

flex-direction: row /*- horizontal layout*/
flex-direction: column /* - vertical layout */
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.