How to leave list items side by side?

Question

How to leave list items side by side?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm learning HTML through a Caelum workbook, the problem is that for some reason the page stayed like this and not with the list elements one next to the other. I used position for that.

HTML code:

header {
  position: relative;
}
.menu-opcoes ul li {
  display: inline;
  margin-left: 20px;
  font-size: 15px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.sacola {
  background: url(img/sacola.png) no-repeat top right;
  font-size: 14px;
  padding-right: 35px;
  padding-top: 8px;
  text-align:	right;
  width: 140px;
  position: absolute;
  top: 0;
  right: 0;
}	

.menu-opcoes a {
  color: #003366;
}

.container {
  margin: 0 auto;
  width: 940px;
}

body {
  color: #333333;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Mirrior Fashion</title>
	</head>
	<body>
		<header class="container">
			<h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
			<p class="sacola">
			Nenhum item na sacola de compras.
			</p>
			<nav class="menu-opcoes">
				<ul>
					<li><a	href="#">Sua	Conta</a></li>
					<li><a	href="#">Lista	de	Desejos</a></li>
					<li><a	href="#">Cartão	Fidelidade</a></li>
					<li><a	href="sobre.html">Sobre</a></li>
					<li><a	href="#">Ajuda</a></li>
				</ul>
			</nav>
		</header>
	</body>
</html>

I'm sorry if the code is written in a hard-to-read way.

html html5

asked by anonymous 23.02.2018 / 19:51

2 answers

Convert JSON to Object with different structure How to use NOT IN with data from another server in PHP

score 1 · Answer 1

<h2>Especificações Técnicas</h2>
<table id="tabelaspec">
<caption>Tabela Técnica do Google Glass <span>Mar/2013</span></caption>

  <tr><td class="ce">Tela</td><td class="cd">Resolução equivalente a tela 
  de 25"</td></tr>
  <tr><td rowspan="2" class="ce">Camera</td><td class="cd">5MP para 
  fotos</td></tr>
  <tr><td class="cd">720p para vídeos</td></tr>
  <tr><td rowspan="2" class="ce">Conectividade</td><td class="cd">Wi-
  Fi</td></tr>
  <tr><td class="cd">Bluetooth</td></tr>
  <tr><td class="ce">Memória Interna</td><td class="cd">12GB</td></tr>
  </table>

This would be the structure for you to create a list as a table, you can try to work on variations within that.

the css3 code:

table#tabelaspec {
 border: 1px solid #606060;
 border-spacing: 0px;
 margin-left:auto; 
 margin-right:auto; 
}
table#tabelaspec td {
 border: 1px solid #606060;
 padding: 10px;
 text-align: center;
 vertical-align: top;
}
table#tabelaspec td.ce {
 text-align: right;
 background-color: #606060; 
 color:#ffffff;
 font-weight: bold;
}
table#tabelaspec td.cd {
 background-color: #dddddd;
 text-align: left;
}
table#tabelaspec caption {
 color: #888888;
 font-size: 13pt;
 font-weight: bolder;
}
table#tabelaspec caption span {
 display: block;
 float: right;
 color: black;
 font-size: 8pt;
 margin-top: 10px;
}

I hope I have helped with your problem!

score 0 · Answer 2

With position absolute you are positioning all items in the same place.

Switch to position: relative or omit this style in the .menu-opcoes ul li class. If you want to align the menu to the right, add a style to ul :

.menu-opcoes ul {
   float: right;
}

.menu-opcoes ul li {
    display: inline;
    margin-left: 20px;
    font-size: 15px;
    position: relative;
    float: right;
}

header {
    position: relative;
}

.menu-opcoes ul {
  float: right;
}

.menu-opcoes ul li {
    display: inline;
    margin-left: 20px;
    font-size: 15px;
    position: relative;
}
.sacola {
    background: url(img/sacola.png) no-repeat top right;
    font-size: 14px;
    padding-right: 35px;
    padding-top: 8px;
    text-align: right;
    width: 140px;
    position: absolute;
    top: 0;
    right: 0;
}   

.menu-opcoes a {
    color: #003366;
}

.container {
    margin: 0 auto;
    width: 940px;
}

body {
    color: #333333;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

<header class="container">
        <h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
        <p class="sacola">
        Nenhum item na sacola de compras.
        </p>
        <nav class="menu-opcoes">
            <ul>
                <li><a  href="#">Sua    Conta</a></li>
                <li><a  href="#">Lista  de  Desejos</a></li>
                <li><a  href="#">Cartão Fidelidade</a></li>
                <li><a  href="sobre.html">Sobre</a></li>
                <li><a  href="#">Ajuda</a></li>
            </ul>
        </nav>
    </header>