Move to a new line using CSS not <br />Updated: March 4th, 2019

Created: 04/03/19

I've been modifying the search widget for a decade to move the button from inline to the next. Having a bit of spare head space I wondered if it could be done with css. The solution was to use the existing class for the button and add [display:block]. There was then the extra positioning using the subsequent three lines.

CSS

form.search div.compact_search_form input.search_submit{
  color: blue;
  font-weight: bold;
  display:block;
  width:60%;
  text-align:center;
  margin:0.6em auto;
}
 
print   Print