0

I'm sitting in front of a template that is making me angry.

<form>
  <p>
    <span class="apple"><input></span>
  </p>
  <p>
    <span class="peach"><input></span>
  </p>
  <p>
    <span class="melone"><select></select></span>
  </p>
  <p>
    <span class="button"><input/></span>
  </p>
</form>

The first two input fields shall have a width of 50% and placed in one line. The third element shall have an extra line and a width of 100%.

So my solution so far. The p-Tag is float:left. And the element has all their own width e.g. apple 50%, peach 50%, melone 100%.

But that don't work.
Is it possible to say that only the parent p-tag of the class melone shall have 100% and maybe a float none? How can I get the parent with CSS because I have no chance to change the p-tags. The p-tags are dynamically generated.

Timo.Klement
  • 627
  • 10
  • 29
  • try `.melone { display: inline-block; }` – CRABOLO Sep 17 '14 at 10:09
  • Not sure this is a duplicate..it's not asking how to style the paragraphs based on the the content [despite the wording] (at least as far as I can see it). `p:nth-child` or `p:nth-of-type` looks to be the solution. – Paulie_D Sep 17 '14 at 10:18
  • Check out this [Fiddle](http://jsfiddle.net/nxqvmq45/), could be the solution – Mihir Sep 17 '14 at 10:22
  • Yep...that's basically what I had. – Paulie_D Sep 17 '14 at 10:25
  • @Mihir Thanks, that is nearly the solution. But I forgot to add more input fields. As a demo I thought it would be enough. For example there is a button at the end. So I can't just say "last-child" because I'm not sure which one is the last child. :-( – Timo.Klement Sep 17 '14 at 10:30

0 Answers0