Alternative To Inside - HTML & CSS - SitePoint Forums Trang chủ » Html Br Alternatives » Alternative To Inside - HTML & CSS - SitePoint Forums Có thể bạn quan tâm Html Br Kullanımı Html Br Options Html Br Substitute Html Butona Tıklayınca Başka Sayfaya Yönlendirme Html Button Alt Text Loading Alternative to <br /> inside <dl> HTML & CSS mitcho April 26, 2011, 9:32pm 1 Hi guys. I just found out I cannot have a BR inside a DL (as in the code below). The reason for the BR is to clear the floats, because the dt and dd are both floated so they display next to each other. <dl class="signup button"> <dt> </dt> <dd> <input type="submit" class="button" value="SIGN UP NOW" /> </dd> <br class="fix" /> </dl> I tried fixing it and couldn’t find an effective way. Wanted to check if anyone knows of an easy alternative? Thanks in advance. Mitchell rpkamp April 26, 2011, 9:34pm 2 Ditch the <br /> and put overflow: hidden on the dl PaulOB April 27, 2011, 11:13am 3 If the dt or dt has multiple lines then floats are not the best choice as you can’t clear a pair of items to start the next row. Use display:inline-block instead which ensures that each pair always start on a new line together. Here’s an example that I posted for someone yesterday. PiontekMedia May 5, 2011, 6:27am 4 Have you tried applying clear: both; to the dl? John_Betong May 5, 2011, 7:14am 5 Maybe I don’t fully understand the question, implications or whatever but have you tried this: <dl class="signup button"> <dd> <input type="submit" class="button" value="SIGN UP NOW" /> <br class="fix" /> </dd> </dl> Can you supply a link to the webpage and what visual effects you are trying to achieve? Also instead of floating have you tried setting the margin and padding properties to zero then adjust each of them to suit your requirements? PaulOB May 5, 2011, 8:30am 6 To the two posters above you missed the point a little If the dt and dt are floated and you want to start another pair of dt’s and dds underneath then you can’t simply clear one or both of them because they will not align in rows in IE. The first one will clear but the following will float up to the first line. The situation is exacerbated if you have multi lines in either the dt or dd and the whole thing goes to pot. Adding a clearing element between a dt and dd would do the trick but is invalid. The only solution with floats would be to close the dl and clear the floats with overflow:hidden but that means that you can only ever have one pair of dt and dd in each dl which is most cases would be silly. However, if you look at my example in post #3 you will see how it can be done easily without using floats but using display:inline-block and avoid all the issues. John_Betong May 5, 2011, 1:25pm 7 Now I fully understand the question my version PaulOB May 5, 2011, 7:43pm 8 John_Betong: Now I fully understand the question my version That’s not bad and is very close in good browsers However it is a also a good example of the bug in IE7 and under that I mentioned as the reason that floating won’t work for all. Have a look at IE7 and you see that the floats still rise up and is all mis-aligned. I could live with IE6 being wrong but I think IE7 needs to be catered for for a while longer What I like about inline-block though is you can align to the bottom also which looks a lot neater I think. BTW, I know it was probably left in place in error (as I do it all the time) but float and inline-block are mutually exclusive. Float wins out and the inline-block is redundant. #john dd {float:left; [B]display:inline-block; [/B]margin-top:0.42em} That was probably just a copy and paste as you obviously know what you are doing. Related topics Topic Replies Views Activity Get Floats to Automatically Clear in IE6 HTML & CSS 5 448 October 8, 2014 Styling inline definition lists HTML & CSS 14 3062 August 25, 2016 Best way to do form elements? HTML & CSS 5 390 January 26, 2010 Responsive, semantic, and standards compliant method of creating regular rows? HTML & CSS 3 936 February 25, 2015 [HELP] Error in tag </ dl> HTML & CSS 10 1511 October 8, 2014 Từ khóa » Html Br Alternatives What Is The Alternative To If I Want To Control The Height Between ... What Is The Best Alternative To Repetitive Typing Of Tags In HTML ... How To Break Line Without Using Tag In HTML / CSS Alternative To BR TAG | Learn HTML CSS - YouTube How To Break Line Without Using Tag In CSS - W3docs What To Use Instead Of - HTML Forum At WebmasterWorld Tag Alternatives? - Web Hosting Talk [Solved] Spacing Text In CSS, Alternatives To The BR Tag The Centered Text Element - HTML: HyperText Markup Language Search Code Snippets | Alternative Br Tag Css : The Line Break Opportunity Element - HTML - MDN Web Docs Br Alternative Tag In Html Code Example - Newbedev HTML Pre Tag - W3Schools 4.6. Precise Spacing And Layout - HTML & XHTML - O'Reilly
