html - Last <li> Not Inline, Messes up the Size of it -


so webpage making dropdown menu scratch. have header contains 5 list items , logo. let's call list items tab1, tab2, tab3, tab4 , tab5. goal have tab1, tab2, tab3, tab4 , logo display inline, have tab5 display right below tab4. this, set first 4 tabs , logo have have property display: inline-block , 5th tab display: block. solves issue of having fifth tab display under other tabs , logo, though fifth tab not retain same width other tabs, though classified under same class .tab. ends happening fifth tab becomes width of body. tried fix setting left , right padding of tab manually, though not work. there way can have fifth tab act/display other tabs (as in same width, height, etc.), not displayed inline?

here's html:

<div class="header">     <a class="tab" id="tab1"><li>home</li></a>     <a class="tab" id="tab2"><li>about</li></a>     <img src="images/logo.png" id="logo" width="260px" height="95px;"/>     <a class="tab" id="tab3"><li>menu</li></a>     <a class="tab" id="tab4"><li>order</li></a>     <a class="tab" id="tab5"><li>cater</li></a> </div>

and here's css:

li {     list-style-type: none; } .header{     text-align: center;     background-color: red; } .tab, #logo{     padding-right: 2.4%;     padding-left: 2.4%;     display: inline-block;     vertical-align: middle;     border: 2px solid black; } #tab5{     margin-top: 10px;     display: block; }

here's jsfiddle demonstration: https://jsfiddle.net/gobtt6vk/

thanks!

the #tab5 occupying 100% of body's width because that's display:block; does.

you can solve problem giving width, example:

#tab5 {     display: block;     width: 30px;     margin: 10px auto 0 auto; /* aligns #tab5 center , gives margin-top:10px; */ }

or can solve giving display:table; instead of display:block; wont need give fixed width, adjust text.
html structure should improved, wasted little bit of time here , reorganized you.

here's online example: https://jsfiddle.net/wujncnsd/

<div class="header">     <ul>         <li id="tab1" class="tab"><a>home</a></li>         <li id="tab2" class="tab"><a>about</a></li>         <li id="logo">             <img src="images/logo.png" width="260" height="95"/>         </li>         <li id="tab3" class="tab"><a>menu</a></li>         <li id="tab4" class="tab"><a>order</a></li>         <li id="tab5" class="tab"><a>cater</a></li>     </ul> </div> 
ul {margin: 0; padding: 0;} li {list-style-type: none;}  .header{     text-align: center;     background-color: red; } .tab, #logo{     padding-right: 2.4%;     padding-left: 2.4%;     display: inline-block;     vertical-align: middle;     border: 2px solid black; } #tab5{     margin: 10px auto 0 auto;     display: table; }

Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more