Html 哪种css规则使元素垂直放置，而不考虑内联块规则？

哪种css规则使元素垂直放置，而不考虑内联块规则

我希望元素水平内联，但它们为我垂直内联。 最后，我无法通过所有css，因为stackoverflow为我阻塞了问题代码量

如果我试着拉小提琴-它们水平排列， 但是，如果我在我的电脑Opera、Chrome和Firefox浏览器上试一试——它们会生成一列按钮而不是一行； 若我从远程服务器加载，在那个里我有订阅，-按钮也会生成一列而不是一行

html

如果我只把css+颜色和文本按钮水平对齐

但是如果我把这个css放在整个sylesheet的末尾（下面是封闭的），规则不会使带有class

.inbk

的按钮水平对齐。Smth会影响它们的对齐，我不明白是什么。我不能在小提琴上显示，因为按钮在那里水平对齐。但在我的屏幕上，它们在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;
}

---

使用

float:[左/右]，则对于浮动元素，有
清除：[两个/左/右]


按钮{
明确：两者皆有；
浮动：左；
}
登录
登记
提醒
联系人按钮是垂直的，而不是水平的，因为

1） 我把元标签和样式放错地方了，它们不是在脑袋里，而是在身体里

样式标记位于主体中，因此它们的应用顺序不正确。样式在正文中，因为我使用自己的迷你mvc，其中输出刷新受
print\u 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） 我还移除了头部内部的包裹，比如
，它给出了关于头部缺失和身体错位的错误信息。若您需要将javascript应用于头部，请将类和id放在链接内，不要为此创建包装范围

3） 最后，通过分析样式表，我发现注释掉
wordwrap行：break-word，和
空白：预换行使按钮水平

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; 

}

我的
按钮
包含在模板中，它们位于
中。很可能是
break word
，因为
div
contents=
按钮使它们转到单独的行。
我不明白你想要什么。你希望按钮是内联的，还是希望每个按钮之间都有一个“回车”键？你的问题中没有这样做的规则。您需要创建一个真实的代码片段结果视图-它们水平对齐，而不是垂直对齐…在我的应用程序中，它们垂直对齐。这是我包含的唯一代码，我检查了Opera、Firefox和Chrome。原因似乎是我如何输出文件。我使用自己的迷你框架，它使smth成为样式表，它们被包含在
主体中，而不是
主体中。如果我不使用
视图
或
控制器
来显示
test.php
，则样式可以工作，我可以在
头部
部分中看到它们。但是，如果尝试从视图或
Controller
操作输出
test.php
，则样式无法正常工作，并且包含在
主体部分中。我需要将它们在行中水平内联。通常，如果使用内联块，元素将水平对齐。但是，在我的例子中，我不明白为什么它们是垂直对齐的。或者右键单击元素并通过控制台检查它，或者显示相关的CSS规则。这可能是因为您的空间比需要的少，并且元素一个接一个地落下。如果它们位于垂直列中，则它们占用的空间比水平行中的多。如果我查看规则，我只能看到文本、颜色，除了我设置的规则
display:inline block之外，与对齐无关和
垂直对齐：底部（我也尝试过不使用此规则）。如果我在样式表的末尾为class
.inbk
创建一个简短的样式，希望覆盖所有可能的其他规则，则它不起作用。我需要加载整个样式表，因为按钮是标题的一部分，而whle样式表适用于整个项目。-似乎很有帮助
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();

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;