• 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> ?

Object Storage Arubacloud
0 głosów
983 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,180 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,180 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 520 wizyt
0 głosów
2 odpowiedzi 467 wizyt
pytanie zadane 17 października 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)
0 głosów
1 odpowiedź 148 wizyt

92,575 zapytań

141,424 odpowiedzi

319,649 komentarzy

61,961 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...