css - 将水平JQuery选项卡更改为垂直选项卡

我有这个jquery标签Working Demo
选项卡水平显示。我想垂直显示选项卡，并在右侧显示内容。

原始的CSS代码是

.tabs {


background: #c0392b;
  height: 40px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 20px;
}

.tabs li {
  display:inline-block;
  white-space:nowrap;
  float: left;
  margin: 0;
  padding: 0;
}
.tabs a {
  background: #c0392b;
  display: block;
  float: left;
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 12px 22px 12px 22px;
  /*border-right: 1px solid @tab-border;*/

}

我想在垂直方向上进行更改。在修改CSS时需要帮助。
我试图将UL元件浮动到左侧。但这不起作用。

最佳答案

这只是CSS解决方案。检查这是否对您有帮助。这是FIDDLE

以下是对CSS所做的CSS更改（已对所做的更改进行了注释）。

.flat-form {
  /* background: #cd6a60; */ /* Removed this line */
  color:#dfdfdf;
  width: 100%;
  /* padding-bottom:20px; */ /* Removed this line */
  position: relative;
    overflow:hidden; /* added this line */
  font-family: Verdana;
}
.tabs {
  background: #c0392b;
  /* height: 40px; */ /* Removed this line */
  margin: 0;
  padding: 0;
  list-style-type: none;
  /* width: 100%; */ /* Removed this line */
  width: 20%;  /* added this line, change this to whatever value you want the width to be*/
  position: relative;
  display: inline-block; /* changed block to inline-block */
  /* margin-bottom: 20px; */ /* Removed this line */
  float: left; /* Added this line */
}

.tabs li {
  display:block; /* changed inlin-block to block */
  white-space:nowrap;
  /* float: left; */ /* Removed this line */
  margin: 0;
  padding: 0;
}
.tabs a {
  background: #c0392b;
  display: block;
  /* float: left; */ /* Removed this line */
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 12px 22px 12px 22px;
  /*border-right: 1px solid @tab-border;*/
    text-align:right; /* added this line */

}
.tabs li:last-child a {
  border-right: none;
  /* width: 174px; */ /* Removed this line */
  /* padding-left: 0; */  /* Removed this line */
  /* padding-right: 0; */  /* Removed this line */
  /* text-align: center; */ /* Removed this line */
}
.form-action {
  padding: 0 20px;
  position: relative;
  float:left; /* added this line */
  background: #cd6a60; /* added this line */
  padding:15px; /* added this line */
  width:80%; /* added this line */
  min-height:100px;  /* added this line */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.show {
  display: inline-block; /* changed block to inline-block */
}

另外，我也对JQuery进行了更改，也在那里进行了评论。请检查小提琴。

关于css - 将水平JQuery选项卡更改为垂直选项卡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22592005/