Question

我有这个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元素浮动到左侧。但这不起作用。

Answer 1

这只是一个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进行了更改，并在那里发表了评论。请检查小提琴。

Answer 2

你见过https://jqueryui.com/tabs/#vertical吗？

使用jquery ui css并添加$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );

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

2 个答案: