https://codepen.io/anon/pen/VoaJmO Would you say this is ‘correct’ to work with it?
1 Like
Looks good. Also check my last response I edited my code to use classes. Much cleaner. You can add margins to get the space between rows you have in your solution.
I copied the code into another codepen.io > https://codepen.io/anon/pen/VoaJQZ
It aligned it correctly, but for some reason margins dont work unless I put it on the body. when I put it in row it doesnt do anything why is that?
edit: doing it with tables is much easier, can I always do forms like these with it or should I just use the way it works no matter how?
Think of it like this <label> is a box that has a class row. row can only be as big as the box it’s inside of which is <label>.
Tables is considered the “old” way of doing things. Flexbox is usually the preferred method for modern web developers.
which item would I have to flex do make the text and the input boxes beside each other?
so like this? https://codepen.io/anon/pen/VoaJQZ just the input?
edit, solved I think(?) -> https://codepen.io/anon/pen/NQrKPm Is this okay in flex? I just used it on .row and the rest I did with inline-blocks and padding.
Well you would create the flex-box to put everything in and then using the flex syntax to arrange each item. I would suggest going through the flex-box challenges again or as @snowmonkey suggested try “flexbox froggy”. This really boils down to preference. There’s a 100 ways to skin a cat.
1 Like
Yeah, but what the hell you gonna do with a nekkid cat? I can’t see it being much fun, for me or the cat.
1 Like
Okay… I got another problem. The text wraps down and doesnt align correctly and I’ve no idea why that is…
https://codepen.io/anon/pen/jgWdMW
edit: it works now… I increased the width of label to 600px; but how can I make it so the text is wrapped where is more text? like here > https://codepen.io/Haicia/pen/ypEwXg
The example uses <label class="left"> with the css
label.left{
width: 45%;
text-align: right;
padding-right: 5%;
font-size: 1.2em;
height: 2em;
padding-bottom: 2px;
}
experiment with that. If you are ever curious how someone styles something. Right click the element in the browser, select “inspect” and to the right you will see the styles assigned.
