html - Which css rule, makes elements to be positioned vertically, despite inline-block rule? -

which css rule, makes elements positioned vertically, despite inline-block rule?

i want elements inline horizontally, instead inline me vertically. finally, not able past css, because stackoverflow blocks question code amount me.

if try on fiddle - align horizontally, https://jsfiddle.net/j3e76u0l/1/ if try on computer opera, chrome , firefox browsers - make column of buttons instead of row; , if load remote server , have subscription, - buttons make column instead of row .

html

<button class="inbk" type="submit" name="redirlogin">login</button> <button class="inbk" type="submit" name="redirregister">register</button> <button class="inbk" type="submit" name="redirremind">remind</button> <button class="inbk" type="submit" name="redircontact">contact</button> 

css

.inbk {   display: inline-block;   vertical-align: bottom; /* tried , without this, both cases smth in css makes buttons align vertically, instead of beein inline */ } 

if put css + colors , text - buttons aligned horizontally,

but if put css @ end of whole sylesheet (which enclosed below), rules not make buttons class .inbk align horizontally. smth affects alignment, , not understand what. can nto show on fiddle, because buttons align horizontally there. on screen form vertical column of buttons in firefix, opera , chrome.

the full css :

/* reset */  html, body, div, span, applet, object, iframe, input, select, option, button, textarea, checkbox, .cksq4 h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, footer, footer span, footer span .backtx, .stpta, .stui, .txcopy, .c100, .txttyp, .butt, .bodyct {   margin: 0px 0px 0px 0px;   border-width: 0px 0px 0px 0px;   padding: 0px 0px 0px 0px;   border-radius: 0;   outline: none; }  html {   box-sizing: border-box;   font-size: 16px; }   /*  *, *:before, *:after {       box-sizing: inherit; } */  body {   background-color: #f0f0f0;   font-size: 32px;   height: auto;   width: 100%;   margin: auto; }  html, body {   width: 100%; }  .bodyct {   top: 0px;   left: 0px;   padding-top: 0px;   padding-left: 100px;   padding-right: 100px;   width: auto;   height: auto;   margin: auto; }  .c100 {   width: 100%;   display: table;   margin: auto;   clear: both; }  footer {   width: 100%;   left: 0px;   position: fixed; }  footer {   margin: 0px 0px 0px 0px !important;   border-width: 0px 0px 0px 0px !important;   padding: 0px 0px 0px 0px !important;   border-radius: 0 !important;   outline: none !important; }  footer, footer span, footer span {   height: 32px;   bottom: 20px; }  span {   display: inline; }  button, .btn, input {   display: inline-block;   vertical-align: bottom; }   .inbk {   display: inline-block;   vertical-align: bottom; }  .cttypplatformset:before, .cttypplatformset:after, cttypoutest:before, cttypoutest:after, .typsetinfo:before, .typsetinfo:after {   content: "";   display: table; }  .cttypplatformset:after, cttypoutest:after, .typsetinfo:after {   clear: both; }  option {   top: 0px;   height: auto;   width: 100%; }  button {   /* height: 51.2px; */   overflow: visible;   padding: 5px 5px 5px 5px;   /* (padding: [top/bottom] [left/right]  */   text-align: center; }  .butstart {   width: 384px;   padding: 0 px;   text-align: center; }  .ct {   top: 0px;   height: auto; }  .cttypoutest {   top: 0px;   height: 515.84px; }   /*  part1 of typformprotfnc, start button , timer  */  .startbuteladd {   top: 0px;   height: 112.64px; }   /*  part2 of typformprotfnc  */  .finger {   top: 112.64px;   height: 67.2px; }   /*  part3 of typformprotfnc   */  .userprogwrap, .ctextype {   top: 179.84px;   height: 336px; }   /*  part3 of typformprotfnc contains following elements insise */   /* cttxt */   /* cttypoutest */   /* .stpta : textarea of part3 typformprotfnc  */   /* .stui : user input of part3 typformprotfnc  */   /* .backtx :  div txcopy of part3 typformprotfnc  */   /* .txcopy :  div styled copy of user input of part3 typformprotfnc  */  .stui, .stpta, .backtx, .txcopy {   top: 0px;   left: 0px; }  .stui {   height: 80px; }  .stpta, .backtx, .txcopy {   height: 336px; }  .ctlett, .stpta, .stui, .backtx, .cttxt, .finger, .startbuteladd {   width: 1200px; }  .stpta, .stui, .backtx, .finger {   overfow: hidden; }  table, th, td {   padding: 15px; }  .title {   font-size: 48px;   line-height: 48px;   text-align: center;   text-transform: capitalize;   padding: 4.8px; }  p, div, span, {   font-size: 32px;   text-align: justify;   text-indent: 0px;   letter-spacing: 1px;   line-height: 32px;   white-space: pre-wrap;   word-wrap: break-word;   word-break: normal;   text-indent: 0px; }  p {   text-indent: 48px; }  .chmenuc, .btn, .startbutel {   font-size: 32px;   text-align: justify;   padding: 3.2px;   text-indent: 0px;   letter-spacing: 1px;   line-height: 51.2px;   white-space: pre-wrap;   word-wrap: break-word;   word-break: normal;   text-indent: 0px; }  div, span, .chmenuc, .btn, .startbutel, select, select option, option {   font-family: "times new roman", georgia, serif;   word-wrap: break-word;   word-break: normal;   text-align: justify; }  div, span, .chmenuc, .btn, option, .startbutel {   text-indent: 48px; }  select option {   font-size: 32px; }  select {   font-size: 32px;   text-indent: 2px; }  .txttyp {   text-align: left; }  .finger, .txttyp, .infostr {   font-size: 80px;   font-family: "courier new", courier, monospace;   text-indent: 0px;   letter-spacing: 1px;   line-height: 80px;   white-space: pre-wrap;   word-wrap: break-word;   word-break: normal;   color: #9233db; }  footer, footer span, footer span {   font-size: 25.6px;   text-indent: 0px;   line-height: 25.6px;   font-family: "courier new", courier, fantasy;   color: #52009e; }  footer, footer span, footer span {   margin: 0px 0px 0px 0px !important;   border-width: 0px 0px 0px 0px !important;   padding: 0px 0px 0px 0px !important;   border-radius: 0 !important;   outline: none !important; }   /*scrolling*/  .backtx, .txcopy {   overflow: auto; }  footer {   background-color: #bbd9ed; }  .backtx {   background-color: rgba(215, 220, 254, 0.5);   color: rgba(233, 43, 233, 0.9); }  .txcopy {   color: rgba(0, 0, 0, 0.5); }  .stpta {   color: rgba(0, 55, 184, 0.94);   background-color: transparent;   overflow: auto;   resize: none; }  .stui {   opacity: 0.5;   color: rgba(0, 0, 0, 0.5); }  .err, err {   color: rgba(253, 48, 48, 0.5);   background-color: rgba(255, 173, 173, 0.5); }  .correct, correct {   color: #1ca01f;   background-color: #97ed98; }  wrong {   color: #77ff0f;   background-color: #ff0f0f; }  .btn, button, input[type=submit] {   border: 2px solid #6c74e5;   color: black;   text-align: center;   text-decoration: none;   background-color: #cacafc;   background-image: linear-gradient(to bottom, #b8a4ef, #ddd4f7);   border-radius: 5px;   padding: 0px 0px 0px 0px;   -webkit-align-content: center;   -ms-flex-line-pack: center;   align-content: center; }  .btn:hover, button :hover {   background-color: #a3b4ff;   background-image: linear-gradient(to bottom, #b8a4ef, #f9e2f6);   text-decoration: none;   color: #0000fe;   -webkit-align-content: center;   -ms-flex-line-pack: center;   align-content: center; } 

buttons vertical instead of horizontal, because

1) had misplaced meta tags , styles, not in head, in body instead.

styles tags in body, applied not in right order. styles in body, because use own mini-mvc, output flushing affected print_r , echo

ob_start(); $viewdata = $this->data;  include_once( $this->viewtemplpath.$this->file ); //if included files have print_r or echo, styles gets displaced. if($store) { $buffer = ob_get_clean(); echo $buffer; } else ob_end_flush(); 

i have removed print_r, , echo statements, have used debugging. after this, head in place, styles , meta tags working.

2) have removed wrapping <span> inside head, <head><span id="styles1" class="styles"> <link .... /> </span></head>, gives errors, missing head, , misplaced body. if need javascript apply head, put class , id inside link, not create wrapping span this.

3) finally, analyzing stylesheet have found commenting out lines word-wrap: break-word; , , white-space: pre-wrap; makes buttons horizontal.

p, div, span, {   font-size: 32px;   text-align: justify;   text-indent: 0px;   letter-spacing: 1px;   line-height: 32px;   /* white-space: pre-wrap; */   /* word-wrap: break-word; */   word-break: normal;    text-indent: 0px;  

}

my buttons included in template, in <div id="header">. break-word, div contents = the buttons, makes them go separate lines.