哪个css规则使元素垂直放置，尽管有内联块规则？
我希望元素水平内联，但它们为我垂直内联。 最后，我无法通过所有 css，因为 stackoverflow 为我阻止了问题代码量。
如果我尝试小提琴 - 它们水平对齐， https://jsfiddle.net/j3e76u0L/1/但是如果我在我的电脑上尝试 Opera、Chrome 和 Firefox 浏览器 - 它们会制作一列按钮而不是一行; 如果我从我有订阅的远程服务器加载，-按钮也会成为一列而不是一行.
.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 with this and without this, both cases smth in css makes buttons align vertically, instead of beein inline */
}
如果我只放这个css +颜色和文本 - 按钮水平对齐，
但是，如果我把这个 CSS 放在整个教学表的末尾(下面附有)，规则不会使带有类.inbk的按钮水平对齐。Smth 影响他们的对齐方式，我不明白是什么。我可以在 Fiddle 上显示这一点，因为按钮在那里水平对齐。但是在我的屏幕上，它们在Firefix，Opera和Chrome中形成了垂直的按钮列。
完整的 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 a .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 a {
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 and timer */
.startButElAdd {
top: 0px;
height: 112.64px;
}
/* Part2 of TypFormProtFnc */
.finger {
top: 112.64px;
height: 67.2px;
}
/* Part3 of TypFormProtFnc also */
.userProgWrap,
.ctExType {
top: 179.84px;
height: 336px;
}
/* Part3 of TypFormProtFnc contains the following elements insise */
/* ctTxt */
/* ctTypOutest */
/* .stPta : textArea of Part3 TypFormProtFnc */
/* .stUi : user input of Part3 TypFormProtFnc */
/* .backTx : div with txcopy of Part3 TypFormProtFnc */
/* .txcopy : div with 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,
a {
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 a {
font-size: 25.6px;
text-indent: 0px;
line-height: 25.6px;
font-family: "Courier New", Courier, fantasy;
color: #52009e;
}
footer,
footer span,
footer span a {
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;
}
按钮是垂直的而不是水平的，因为
1)我放错了元标签和样式，它们不在头部，而是在正文中。
样式标签位于正文中，因此它们的应用顺序不正确。样式在正文中，因为我使用自己的mini-mvc，其中输出刷新受到print_r和echo的影响
ob_start();
$viewData = $this->data;
include_once( $this->viewTemplPath.$this->file ); //if included files have print_r or echo, the styles gets displaced.
if($store) { $buffer = ob_get_clean(); echo $buffer; }
else ob_end_flush();
我已经删除了所有用于调试的print_r和echo语句。在此之后，头部就位，因此样式和元标记正在工作。
2)我还删除了头部内部的包装<span>，例如<head><span id="styles1" class="styles"> <link .... /> </span></head>，这会产生错误，关于头部缺失和身体错位。如果你需要javascript应用于head，把类和id放在链接内，不要为此创建包装跨度。
3)最后，分析样式表，我发现注释掉word-wrap: break-word;行，white-space: pre-wrap;使按钮是水平的。
p, div, span, a {
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;
}
我的buttons包含在模板中，它们位于<div id="header">中。最有可能的是break-word，因为div内容=the buttons，使它们去单独的行。
使用float: [left/right];，则对于浮点元素，有clear: [both/left/right]
button {
clear: both;
float: left;
}<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>