Saturday, April 25, 2015

Because I thought that you now really only used EM to create


Time
HeyHo dear community I have created a form and want the labels and buttons, etc. all the same size and have the same height. Currently it looks like this: Image As you can see, the second field "Quantity" is higher than the first. But I would like that all have the same height and I can vary the length. Form:
Code: <form class = "toilet alchemy" action = "" method = "post" style = "width: 490px; margin: auto;"> <fieldset> <legend> Witchcraft Alchemy Calculator </ legend> <label> Select Charm: cystic fibrosis </ label> <select name = "recipe"> <option value = "Speed Charm"> Speed Charm </ option> <option cystic fibrosis value = "Dark Curse Charm"> Charm of Dark Curse </ option> </ select > <input type = "text" name = "quantity" placeholder = "Quantity"> <input type = "submit" value = "Calc"> </ fieldset> </ form> CSS:
Code: .wc-alchemy fieldset {padding: 1em; width: 30em; border: solid 0.1em # 000; } .wc-Alchemy Legend {font-size: 1.5em; } .wc Alchemy label {width: 5em; text-align: right; margin-right: 1em; } .wc-Alchemy input {font-size: 1em; width: 4em; height: 1.4em; margin-right: 0.5em; } .wc-Alchemy input [type = submit] {height: 1.5em; } .wc-Alchemy select {width: 12em; height: 2em; margin-right: 0.5em; }
The units em and ex are dependent on the font and may vary within a document. The unit em is just the font size. Within an element with a 2in font 1em means exactly 2in. Expressions such as margins and padding are dependent on em, and if the user uses a large font (for example on a large monitor) cystic fibrosis or a small font (eg on a mobile device), are represented proportionally correct sizes. Stipulations as 'text-indent: 1.5em' and 'margin: 1em' are very common cystic fibrosis in CSS. Source: http://www.w3.org/Style/Examples/007/units.de.html
Because I thought that you now really only used EM to create "responsive design". So I try everywhere to work with EM. But apparently I go there a little wrong approach the thing. As I read, it is difficult to the "option-list" with CSS to style alone? Now although all are at the same height (I guess) but the two fields cystic fibrosis are not the "option-list" flush and are a little higher. How to solve this problem?


No comments:

Post a Comment