Remove right margin on last inline element

I have a footer div with inner span buttons.

Each button have margin-right: 20px and the .footer element has padding: 0 13px.

I want to prevent the margin-right of the most right button by setting negative margin-right to its parent.

How could I get it with margin-right?

.footer {
  border: 2px solid blue;
  padding: 0 13px;
  width: 120px;
  text-align: right;
  background-color: yellow;
}

.btn {
  border: 1px solid black;
  margin-right: 20px;
  background-color: red;
}
<div class="footer">
  <span class="btn">Btn1</span>
  <span class="btn">Btn2</span>
</div>

Answers


You need to add another container child of .footer and apply a negative margin-right to that element. This approach is also described here:

.footer {
  border: 2px solid blue;
  padding: 0 13px;
  text-align: right;
  background-color: yellow;
  overflow:hidden;
}
.footer > div {
  margin-right:-33px;
  }

.btn {
  border: 1px solid black;
  margin-right: 20px;
  background-color: red;
}
<div class="footer">
  <div>
    <span class="btn">Btn1</span>
    <span class="btn">Btn2</span>
  </div>
</div>

Need Your Help

Regex in C# , Expression in negative lookbehind

c# .net regex

I`m trying to write an expression to mach a single code preceded by an odd number of question marks.

Debugger that watches jvm running a BlackBerry application on device simulator

blackberry jvm debugging simulator

I need a debugger that watches jvm running a BlackBerry application on device simulator (the same way as OllyDbg is used to debug Windows applications.) Any recommends?