javascript - Jquery Mobile center and use full width of screen with 3 buttons -
I'm trying to use 3 buttons to full width of the screen and resize if necessary though when i Trying to use the code, it will not be centrally tried to use the margin-left margin-right auto on the button but I think it can not be found to work.
The HTML looks like this:
& lt; Div id = "overview -content" & gt; & Lt; Div id = "navgroup" data-role = "control group" data-type = "horizontal" & gt; & Lt; Button class = "ui-btn ui-shadow ui-btn-icon-left ui-btn-a ui-icon-star" & gt; Acceptive & lt; / Button & gt; & Lt; Button class = "ui-btn ui-shadow ui-btn-icon-left ui-btn-a ui-icon-home" & gt; Group & lt; / Button & gt; & Lt; Button class = "ui-btn ui-shadow ui-btn-icon-left ui-btn-a ui-icon-mail" & gt; Meddelande & lt; / Button & gt; & Lt; / Div & gt;
and CSS:
#navgroup {text-align: center; Margin-top: 0 pixels; Padding-top: 0 pixels; Width: 100%; } # Overview-content {margin: 0 pixels; Padding: 0 pixels; } .ui-controlgroup-control {width: 100%; } .ui-controlgroup-horizontal .ui-controlgroup-control button.ui-btn, .ui-controlgroup-control .ui-btn-icon-notext {width: 25%; }
To focus on the buttons you want to block them from level elements To give them a sensitive width, you will give the button a percentage of width - see below:
button {display: block; Margin: 0 auto; Text align: center; Width: 80%; }
Comments
Post a Comment