Programim dhe zhvillim, javascript, python, php, html

Si mund t'i përqendroj artikujt e nënlistës si shembulli i imazhit?

Po përpiqem të kuptoj se si t'i përqendroj listat e mbivendosura më poshtë. Për momentin unë jam duke përdorur diferencë dhe mbushje për të shtyrë artikujt e listës.

Listat e mbivendosura shfaqen kur rri pezull mbi artikullin prind të listës. Artikujt e listës së ndërthurur shfaqen si inline-flex pasi blloku inline nuk shfaqet në këtë shembull për ndonjë arsye.

imazh shembull i asaj që unë do të fut përshkrimin e imazhit këtu

  #nav {
  margin: 0;
}

ul {
  background: #F8F8F8;
  text-align: center; /* centers 1st level list items but not 2nd level(?)*/
  margin: 0 auto;
  padding-inline-start: 0px; /* override chrome user agent style of 40px */
}


/*1st level li styling */

.nav-tab {
  border: 1px solid #F8F8F8;
  border-radius: 10px 10px 0 0;
  display: inline-block;
  background: #F8F8F8;
  padding: 0 40px;
  font-family: 'Segoe UI';
  font-size: 30px;
  color: #707070;
}

.nav-tab:hover {
  background-color: white;
  border: 1px solid white;
  border-radius: 10px 10px 0 0;
}


/*2nd level ul styling */

.dropdown-content {
  position: absolute; /* drops submenu below tabs */
  display: none;      /* hides submenu */
  list-style-type: none; /* removes bullet points */
  background: white;
  font-family: 'Segoe UI';
  font-size: 25px;
  border: white;
  min-width: 100%; /* li stretches % of length of parent element */
  left: 380px;     /* an attempt to push the first list item across the page */
}

li .sub-nav-link {
  text-decoration: none; /* removes underline on links */
  font-family: 'Segoe UI';
  font-size: 25px;
  color: #707070;
  margin-right: 120px; /* an attempt to push the 2nd, 3rd, ..  list items further across the page */
}

li:hover>.dropdown-content {
  display: inline-flex; /* inline-block didnt work for me here(?) - but inline-flex did */
}
<nav class="nav" id="primary-nav">
  <ul>
    <li class="nav-tab">Products
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Range</a></li>
        <li><a href="#" class="sub-nav-link">Catalogue</a></li>
        <li><a href="#" class="sub-nav-link">Search</a></li>
      </ul>
    </li>
    <li class="nav-tab">About Us
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Mission</a></li>
        <li><a href="#" class="sub-nav-link">Background</a></li>
        <li><a href="#" class="sub-nav-link">Design</a></li>
        <li><a href="#" class="sub-nav-link">Production</a></li>
      </ul>
    </li>
    <li class="nav-tab">Events
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Calendar</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Stockists
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">List</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Contact
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Feedback</a></li>
        <li><a href="#" class="sub-nav-link">FAQ</a></li>
        <li><a href="#" class="sub-nav-link">Details</a></li>
      </ul>
    </li>
  </ul>
</nav>

një JSFiddle për të luajtur me kodin tim

html css html-lists
13.11.2018

Përgjigjet:


1

Thjesht bëjeni relativ nivelin e sipërm ul dhe mbajeni prindin li jo të pozicionuar, atëherë mund ta poziciononi absolutisht ul-në e fëmijës për të marrë gjerësinë e plotë dhe për të rreshtuar fëmijët në qendër:

#nav {
  margin: 0;
}

ul {
  background: #F8F8F8;
  text-align: center; /* centers 1st level list items but not 2nd level(?)*/
  margin: 0 auto;
  padding-inline-start: 0px; /* override chrome user agent style of 40px */
  
  position:relative;  /* ADD THIS */
}

/*1st level li styling */
.nav-tab {
  border: 1px solid #F8F8F8;
  border-radius: 10px 10px 0 0;
  display: inline-block;
  background: #F8F8F8;
  padding: 0 40px;
  font-family: 'Segoe UI';
  font-size: 30px;
  color: #707070;
}

.nav-tab:hover {
  background-color: white;
  border: 1px solid white;
  border-radius: 10px 10px 0 0;
}

/*2nd level ul styling */
.dropdown-content {
  position: absolute; /* drops submenu below tabs */
  list-style-type: none; /* removes bullet points */
  background: white;
  font-family: 'Segoe UI';
  font-size: 25px;
  border: white;
  margin:0;
  padding:0;
  display:none;
  text-align:center;
  left: 0; 
  right:0;   /* stretch content full width of ul with left and right */
  top:100%;  /* push content below current ul */
}

.dropdown-content > li {
    display:inline-block; /* so they centre */
    margin:0 1em;         /* space between each item */
}

li .sub-nav-link {
  text-decoration: none; /* removes underline on links */
  font-family: 'Segoe UI';
  font-size: 25px;
  color: #707070;
}

li:hover>.dropdown-content {
  display: block; 
}
<nav class="nav" id="primary-nav">
  <ul>
    <li class="nav-tab">Products
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Range</a></li>
        <li><a href="#" class="sub-nav-link">Catalogue</a></li>
        <li><a href="#" class="sub-nav-link">Search</a></li>
      </ul>
    </li>
    <li class="nav-tab">About Us
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Mission</a></li>
        <li><a href="#" class="sub-nav-link">Background</a></li>
        <li><a href="#" class="sub-nav-link">Design</a></li>
        <li><a href="#" class="sub-nav-link">Production</a></li>
      </ul>
    </li>
    <li class="nav-tab">Events
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Calendar</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Stockists
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">List</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Contact
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Feedback</a></li>
        <li><a href="#" class="sub-nav-link">FAQ</a></li>
        <li><a href="#" class="sub-nav-link">Details</a></li>
      </ul>
    </li>
  </ul>
</nav>

13.11.2018

2

E pozicionova nënmenynë në të majtë dhe përdor një flexbox për të përqendruar përmbajtjen. Dokumentuar gjithashtu në kodin CSS.

  #nav {
  margin: 0;
}

ul {
  background: #F8F8F8;
  text-align: center;
  /* centers 1st level list items but not 2nd level(?)*/
  margin: 0 auto;
  padding-inline-start: 0px;
  /* override chrome user agent style of 40px */
}


/*1st level li styling */

.nav-tab {
  border: 1px solid #F8F8F8;
  border-radius: 10px 10px 0 0;
  display: inline-block;
  background: #F8F8F8;
  padding: 0 40px;
  font-family: 'Segoe UI';
  font-size: 30px;
  color: #707070;
}

.nav-tab:hover {
  background-color: white;
  border: 1px solid white;
  border-radius: 10px 10px 0 0;
}


/*2nd level ul styling */

.dropdown-content {
  position: absolute;
  /* drops submenu below tabs */
  display: none;
  /* hides submenu */
  list-style-type: none;
  /* removes bullet points */
  background: white;
  font-family: 'Segoe UI';
  font-size: 25px;
  border: white;
  min-width: 100%; /* li stretches % of length of parent element */
  /* left: 380px;  an attempt to push the first list item across the page */
  left: 0; /* ADDED */
}

li .sub-nav-link {
  text-decoration: none;
  /* removes underline on links */
  font-family: 'Segoe UI';
  font-size: 25px;
  color: #707070;
  margin-right: 120px;
  /* an attempt to push the 2nd, 3rd, ..  list items further across the page */
}

li:hover>.dropdown-content {
  /* display: inline-flex;  inline-block didnt work for me here(?) - but inline-flex did */
  display: flex; /* ADDED */
  justify-content: center; /* ADDED */
}
<nav class="nav" id="primary-nav">
  <ul>
    <li class="nav-tab">Products
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Range</a></li>
        <li><a href="#" class="sub-nav-link">Catalogue</a></li>
        <li><a href="#" class="sub-nav-link">Search</a></li>
      </ul>
    </li>
    <li class="nav-tab">About Us
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Mission</a></li>
        <li><a href="#" class="sub-nav-link">Background</a></li>
        <li><a href="#" class="sub-nav-link">Design</a></li>
        <li><a href="#" class="sub-nav-link">Production</a></li>
      </ul>
    </li>
    <li class="nav-tab">Events
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Calendar</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Stockists
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">List</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Contact
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Feedback</a></li>
        <li><a href="#" class="sub-nav-link">FAQ</a></li>
        <li><a href="#" class="sub-nav-link">Details</a></li>
      </ul>
    </li>
  </ul>
</nav>

13.11.2018
Materiale të reja
Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..
Faketojeni derisa ta arrini me të dhënat false
A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...
Si të përdorni kërkesën API në Python
Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..
Një udhëzues hap pas hapi për të zotëruar React
Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..
AI dhe Psikologjia — Pjesa 2
Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..
Esencialet e punës ditore të kodit tim VS
Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..
Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..