CSS granice nie pojawiające

Question

Ja próbuje styl mój projekt Menu nawigacji, aby odzwierciedlić jeden na timeanddate.com, jak widać na tym zdjęciu:

aby stworzyć kolory, są one za pomocą prosta dolna i lewa krawędź w CSS.

Próbuję dodać obramowanie do moich tagów <li> w mojej piaskownicy internetowej, http://www.escapetech.com:8080.

Używam następujący CSS:

.anylinkcss li { 
    list-style-type: none; 
} 

.participate li { 
    list-style-type: square; 
    border-left-color: #fa514d; 
} 

#navigation_bar { 
    height: 31px; 
    list-style: none; 
    width: 1000px; 
    margin-top: 15px; 
} 

#navigation_bar li { 
    float: left; 
    padding-right: 35px; 
    padding-left: 10px; 
    margin: auto 0px; 
    vertical-align: middle; 
} 

#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 { 
    position: absolute; 
    line-height: 18px; 
    z-index: 20; 
    background-color: #000; 
    text-align:left; 
    visibility: hidden; 
    left: 421px; 
    top:207px; 
    padding: 7px; 
    padding-left: 25px; 
} 

#anylinkcss3 i dalej reprezentować style dla upadków spadek, natomiast #navigation_bar style są dla całego baru. Bez względu na to, gdzie dodaję jakieś style obramowania, żadne nie pojawiają się, nawet po tym, jak skomentuję cały kod CSS i po prostu dołączę obramowanie tych identyfikatorów i klas.

Moje bieżące menu znajduje się pod linkiem, który napisałem powyżej. Byłbym bardzo wdzięczny, gdyby ktoś mógł rzucić okiem i dać mi znać, dlaczego mogą pojawić się problemy z wyświetlaniem granic. To jest mój pierwszy post na stosie wymiany, więc mam nadzieję, że został poprawnie sformatowany!

Answer 1

Mimo że ustawisz szerokość i kolor, nie możesz pominąć parametru stylu z ramkami.

Aby uzyskać pożądany efekt, jak przedstawiono na obrazku - jsFiddle demo

• ciemny kolor tła dla <ul>
• szeroki border-left na <li>
• margin-bottom: 2px jako dolnej granicy - pokazuje ul tło
• i kilka drobnych poprawek, takich jak tekst-wcięcie itp.

---

Niektóre informacje dotyczące granic

granice CSS składa się z 3 parametrów

• border-width
• border-style
• border-color

Można ustawić jedną wartość, która odnosi się do wszystkich stron

border-width: 5px; 
border-style: solid; 
border-color: red; 

Albo z krótkiej strony border: 5px solid red; a także odnosi się do wszystkich stron.

---

Możesz nadać każdej stronie granicy indywidualny styl, tak jak to robisz powyżej.

• granicy po stronie szerokości
• granicy po stronie stylu
• granicy po stronie kolor

przykład:

border-left-width: 5px; 
border-left-style: solid; 
border-left-color: white; 

co może być wykonane także z skrót: border-left: 5px solid white;

---

Aby uzyskać więcej informacji na temat innych możliwości granicznych

• https://developer.mozilla.org/en-US/docs/Web/CSS/border
• https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

Answer 2

ahhh ... Mózg mi bić do niej. I dodaje border-style, a następnie jest „border”

border: 5px solid white; 

Answer 3

Właściwie trick w jego przypadku jest to, że granica nie jest stosowana tagów kotwicznych listach do! Twoje zdrowie! :) A tak, jeśli zastosujesz border-color jako właściwość, powinieneś również zastosować styl obramowania i szerokość obramowania :)