• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jaki jest wzór css na przesuwanie elementu <li> w stosunku do zbioru elementów <ul> ?

VPS Starter Arubacloud
0 głosów
944 wizyt
pytanie zadane 8 kwietnia 2018 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
edycja 8 kwietnia 2018 przez DariuszH
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script> 
<script src="scripts.js"></script>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Mukta+Mahee" rel="stylesheet">

    
    
</head>

<body>

 
            

 <div class="main">

<div class="right_window">

       
        <ul>
            <li>Michael Jordan</li><br>
            <li>Kobe Bryant</li><br>
            <li>Lebron James</li><br>
            <li>Stephen Curry</li><br>
            <li>Shaquille O'Neal</li>
         
        </ul>

  

       </div>


</div>


<div class="footer">
    
    
</div>       
    
</body>

</html>

body{
	width:100%;
	height:500vh;
	margin:0;
	
}


.main{
width: 100%;
height: 100vh;
float: right;
background-color: darkgoldenrod;


}

.right_window{

width:19%;
float: right;
height:100vh;
background-color: cadetblue;

}

ul{
width:19%;
height:50vh;
position: absolute;
margin:auto;
border:1px solid black;

}


li{

float: left;
margin-bottom: 2vh;
width:100%;
height: 7vh;
line-height: 7vh;
color:white;
font-size: 4vh; 
list-style-type:none;
border:black 1px solid;
}
































.footer{
    
    width:100%;
    background-color: black;
    height: 12vh;
    position: relative;
    top:500vh;
    
}







    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    




Jak Przesunąć wiersz tabelki do lewej strony <ul> ? Lub w ogóle jak manipulować położeniem elementów <li> ??

komentarz 8 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)
Zły język bloczka z kodem
komentarz 8 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)
Cóż takiego jest źle ?
komentarz 8 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)
Zły język bloczka z kodem (kod CSS ma koloryzację składni ustawione na HTML)
komentarz 8 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)
Już poprawione :) Wiesz jak to zrobić ? Jak rozwiązać ten problem ?
komentarz 8 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)
Nie, nie lubię frontu :P
komentarz 8 kwietnia 2018 przez shotokan Nałogowiec (39,660 p.)

@DariuszH,
możesz użyć np. pseudo-elementu ::before

3 odpowiedzi

0 głosów
odpowiedź 8 kwietnia 2018 przez pablop76 VIP (123,060 p.)
wybrane 9 kwietnia 2018 przez DariuszH
 
Najlepsza
Dajesz float:left; w css i <br> w html dla li. To nie ma sensu.
komentarz 8 kwietnia 2018 przez pablop76 VIP (123,060 p.)
Dla main ustawiłeś width:100%; i float: right; to też nie wiem co ma spowodować.
0 głosów
odpowiedź 8 kwietnia 2018 przez Sejdi Początkujący (460 p.)

Ustawiasz padding-left dla <ul>, fabrycznie jest chyba ustawiony na 40px.

Np:

ul
{
   padding-left: 20px;
}

 

0 głosów
odpowiedź 21 kwietnia 2019 przez hans001 Obywatel (1,150 p.)
Ustaw w li "position:relative" i manipuluj wartosciami top,left.

Podobne pytania

0 głosów
3 odpowiedzi 513 wizyt
0 głosów
2 odpowiedzi 453 wizyt
pytanie zadane 17 października 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)
0 głosów
1 odpowiedź 141 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...