CSS: entfernen Sie die separator auf die Letzte und erste Element

Ich habe ein Menü mit div, die einen dunklen hintergrund. Innen ist es, ich habe mehrere Menüpunkt divs mit 1px Ränder auf der rechten und der linken Seite. Auf diese Weise habe ich die Separatoren zwischen Ihnen. Offensichtlich diese erscheinen auf der sehr linken und sehr rechten Seite des Menüs, die ich nicht will. Gibt es eine Möglichkeit, dies zu erreichen, ohne einfügen von 1-pixel-divs als Trennzeichen?

Danke

edit: sorry, ich dachte, es war aussagekräftig genug. Hier ist der code:

<div id="menu">
       <a href="#"><div class="menu_item"><img src="imgs/menu/szabalyzat.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/profil.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/zenekarok.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/jelentkezes.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/esemenynaptar.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/mmmk_estek.png" /></div></a>
 </div>

IE6 Inkompatibilität ist OK (zum Glück).

zeigt uns etwas code wäre nett, denn wir können nur vermuten, was Sie bedeuten, so weit.
setzen divs links ist nicht gut.
n1313: Wenn ich nicht nur die Bilder sind anklickbar und Sie sind kleiner als die eigentlichen divs.
Durch die Positionierung der links angemessen, müssen Sie sich nicht die divs. so etwas wie: .Menü a { display: block; width: 100px; float: left; }
Sie haben, um einen alt - Attribut, um Ihre Bilder, so manchen text zeigt sich, wenn die Bilder nicht geladen werden kann oder angezeigt wird, wenn Sie nicht Ihre-Menü nicht nutzbar in diesem Fall. (+ es ist zwingend erforderlich, um standard-konform).
Allain: Thx, ich gereinigt, bis das Stück code. p4bl0: ich weiß, es ist da, ich gerade entfernt es aus hier aus Gründen der besseren Lesbarkeit. Trotzdem danke.

InformationsquelleAutor Tamás Szelei | 2009-09-01

1

Können Sie nicht haben, 2px linken Rand anstelle von 1px auf jeder Seite und dann mit der css pseudo-Klasse :first-child entfernen Sie diese Marge für das erste Element ?

EDIT: ich Stimme mit der Tatsache, dass Sie verwenden sollten, die Grenze als Trennlinie eher als hintergrund, aber wenn Sie dies tun, dass der Weg für einige gute Gründe, meine Antwort ist immer noch gültig 🙂
- Gut, ich bin unerfahren mit CSS, und glaube nicht, dass der Rahmen für diesen Zweck. Ich hatte die #menu-div und das war die erste Lösung, die kamen mir in den Sinn. Tun Grenzen haben einige Vorteile gegenüber dieser Lösung?
- Grenzen sind nur mehr "saubere" Art und Weise, dies zu tun, da eine Grenze ist bereits eine Art von Trennzeichen.
InformationsquelleAutor p4bl0
13

Folgende Regel für alle gelten .menu_item Elemente, Folgen andere .menu_item-element:
```
.menu_item + .menu_item {
  border-left: 2px solid black;
}
```
- hey! schöner als meine :first-child Weg!
- Leider funktioniert nicht im ie6, wenn.
- Spielt wer noch IE6 verwenden? jk
- 15% Ihrer Kunden tun.
- Microsoft noch unterstützen, jedoch auch alexa große Namen sind Drop-Unterstützung
- Es funktioniert nicht in IE... Also was? Das ist nicht wirklich wichtig, es ist nur eine kleine design-Polieren. So lange, wie die website benutzbar mit jedem browser, es ist okay für mich. Es ist nicht eine 20 um 2 px schwarz Rechteck, das wird erschrecken IE6-Nutzer... Wenn das der Fall war, die meisten von Ihnen schon tot durch Herzinfarkt ^^.
- dies war sicher schöner als :first-child, aber es hat nicht funktioniert bei mir im ff3.5 (es ist möglich, dass ich etwas falsch gemacht habe obwohl).
InformationsquelleAutor Allain Lalonde
3

Den einfachsten Weg yo es zu erreichen, ist die Markierung der ersten und letzten Elemente mit benutzerdefinierten Klassen und entfernen, die Ränder von Ihnen.
```
<ul class="menu">
  <li class="first">One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>
<style>
  .menu li { margin: 0 1px; }
  .menu .first { margin-left: 0; }
  .menu .last { margin-right: 0; }
</style>
```
Können Sie auch versuchen, komplexe css-Selektoren, wie :first-child, aber Sie funktionieren nicht in älteren Versionen von MSIE.

ODER Sie verwenden können, 2px Ränder auf der rechten Seite statt und gehen mit nur einer zusätzlichen Klasse:
```
<ul class="menu">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>
<style>
  .menu li { margin-right: 2px; }
  .menu .last { margin-right: 0; }
</style>
```
- Ich korrigierte die Marge im ersten Beispiel 1px 0 stellt den Rand oben/unten, nicht Links/rechts wie es sein sollte. Auch "none" ist kein Gültiger Wert AFAIK so habe ich ersetzt mit 0.
- Oops, mein schlechtes. Danke.
InformationsquelleAutor n1313
2

Wenn ein hoher Prozentsatz des Publikums Browser unterstützen CSS3, können Sie die :first-child und :last-child-pseudo-Klassen:
```
div#menu div:first-child {
margin-left: none;
}
div#menu div:last-child {
margin-right: none;
}
```
- Ich denke, die ersten und die letzten-Kind sind eigentlich CSS2. Die meisten browser unterstützen Sie, denke ich, nur der ie6 nicht (wieder).
InformationsquelleAutor Donut

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.