Navigatsiya panelini gorizontal HTML/CSS-ga sozlab bo'lmaydi

float: left;

va

display: inline;

har ikkisi ham ishlamayapti.

Men noto'g'ri ish qilyapman? Ushbu navigatsiya panelini gorizontal qilib qanday qilib olaman?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.navbar li {
  margin: 5px;
  padding: 0;
  width: 80px;
  float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 
</div> </div>

1
Tashakkur Alex! Stackoverflow-da kodingizni ishlatganda, u istagan narsani qiladi, lekin men uni matn muharriridan ishlatganda vertikal holatda qoladi. Mening da CDN bor. Hali ham muammomni hal qila olmaydi. Hech kim biron-bir fikrga ega emasmi?
qo'shib qo'ydi muallif sim, manba
.navbar li o'rniga li.navbar { harakat qilib ko'ring.
qo'shib qo'ydi muallif Serge Inácio, manba
Men buni qasddan deb bilmayman, lekin sizning uslublaringizga Pixel qitish qo'shdik. Bundan tashqari, Bootstrap CDN va parchani qo'shdik.
qo'shib qo'ydi muallif AlexG, manba

6 javoblar

Solvedildi:

Ushbu

 

elements need Ushbucorresponding CSS to be

#navbar

va QAYD

.navbar li

.navbar li should be used in UshbuCSS for Ushbuhtml class attribute class="navbar li" whereas #navbar should be used UshbuID attribute

When I changed that, UshbuCSS styling was applied to Ushbuhtml with Ushbucorresponding id attribute.

0
qo'shib qo'ydi

Siz to'g'ri ishlarni qilyapsiz, lekin sizning kod namunangiz ba'zi teglar yo'qoladi:

<html>
    <head>
    </head>
    <body>
    
 

    
    </body>
</html>

will do the trick. You have to say to the browser, what it have to do with those lines : use Html <html> and apply that style using

. If your style directives have to be more important, I think that it could be a better way to create a second file that will contains all your CSS and to link it with your html document.

EDIT:

CSS qoidani: .navbar li navbar sinfini topadi va barcha li liboslarini topadi, shuning uchun siz har li uchun idlarni olib tashlashingiz va ularni sinf nomi bilan almashtirishingiz mumkin

Umid qilamanki yordam berishi mumkin

0
qo'shib qo'ydi
Javobingiz uchun tashakkur @Tony, asl xabarim aniq bo'lmasa kechirim so'raydi. CSS-da boshqa faylga ega bo'ldim va uni <link rel = "stylesheet" type = "text/css" href = "main.css"> yordamida bog'lashni istayman. u hali ham ishlamayapti ... bironta fikr bormi? Rahmat!
qo'shib qo'ydi muallif sim, manba
Muammoni hal qildi va quyida joylashtirildi. #navbar kodini emas, balki .navbar li kodini ishlatishim kerak edi, chunki u ID elementi va sinf elementi emas edi.
qo'shib qo'ydi muallif sim, manba
Sizning brauzeringiz main.css topilmayapti: u qaerda joylashgan? Sizning fikringizga ko'ra, index.html bilan bir xil joyda bo'lishi kerak. Boshqa tomondan, mening postimda taqdim etgan kod namunasini nusxalashga harakat qildingizmi? Buning yordamida nima sodir bo'ladi?
qo'shib qo'ydi muallif Tony, manba
OMG Siz bir xil qiymatga ega bo'lgan bir nechta identifikatorni ishlatayotganingizni ko'rdim. Bir id bitta sahifa uchun bir marta paydo bo'lishi kerak. Foydalanishni istasangiz, sinfdan foydalanishingiz kerak (men tahrirni tahrir qildim)
qo'shib qo'ydi muallif Tony, manba

O'zgarildi

.navbar li {

uchun

li.navbar {

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

li.navbar {
  margin: 5px;
  padding: 0;
  width: 80px;
  float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 
</div> </div>

Siz izlayotgan narsa shumi?

0
qo'shib qo'ydi
O'zgarish .navbar li li.navbar uchun men uchun ishlamaydi. Ushbu sintaksislarning ikkalasi ham maqbulmi? Biri afzalmi? Rahmat
qo'shib qo'ydi muallif sim, manba

quyidagi kod snippetasini sinab ko'ring, sizga yordam berishi mumkin

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.navbar li {
    margin: 5px;
    padding: 0;
    width: 80px;
    float: left;
    list-style-type : none;
}


 
</div> </div>

0
qo'shib qo'ydi
Thanks @sumit chauhan float yordamida qo'shib ko'rdim: chap; va ro'yxat uslubi turi: yo'q; biroq u menga hali ham gorizontal tartib berolmayapti
qo'shib qo'ydi muallif sim, manba

CSS-ni stil yorlig'i yoki tashqi CSS fayliga joylashtiring va uni HTML-ning bosh qismida kiriting

  


0
qo'shib qo'ydi
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

</body>
</html>
0
qo'shib qo'ydi