CSS中的垂直制表符边框问题

时间：2015-01-08 10:57:16

标签： jquery html css css3

这是我的代码。始终使用jsfiddlelink/show链接获取准确的视图。

JSFIDDLE

这是使用jquery的垂直选项卡的屏幕截图 enter image description here

在这里，我使用了box-shadow box-shadow: 2px 2px 2px 1px #888888;，因此当标签处于活动状态时，我无法使用border-right: 3px solid white。

我需要将框阴影加入div ，如下所示

我的预期输出将是这样的..

enter image description here

代码：

    $(document).ready(function() {
      ons.bootstrap();
      $('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
    });
 .ui-tabs.ui-tabs-vertical {
   padding: 0;
   width: 42em;
   margin-left: 6%;
 }
 .ui-tabs.ui-tabs-vertical .ui-widget-header {
   border: none;
 }
 .ui-tabs.ui-tabs-vertical .ui-tabs-nav {
   float: left;
   width: 10em;
   background: #F2F2F2;
   border-radius: 4px 0 0 4px;
 }
 .ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
   clear: left;
   width: 100%;
   margin: 0.2em 0;
   border: none;
   border-width: 1px 0 1px 1px;
   border-radius: 0px;
   overflow: hidden;
   position: relative;
   right: -2px;
   z-index: 2;
 }
 .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
   display: block;
   width: 100%;
   padding: 0.6em 1em;
 }
 .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
   cursor: pointer;
 }
 .ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
   margin-bottom: 0.2em;
   padding-bottom: 0;
   border-left: 4px solid #7fcc28;
 }
 .ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
   margin-bottom: 10px;
 }
 .ui-tabs.ui-tabs-vertical .ui-tabs-panel {
   float: left;
   width: 23em;
   border-left: none;
   border-radius: 0;
   position: relative;
   left: 10px;
   top: 7px;
 }
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsenui.css">
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://onsen.io/OnsenUI/build/js/angular/angular.js"></script>
<script src="http://onsen.io/OnsenUI/build/js/onsenui.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<ons-navigator>
  <ons-page>

    <div style="min-height: 150px;"></div>
    <ons-list-item modifier="tappable" style="line-height: 500px; padding: 0 45px; background-color: #F2F2F2;">
      <ons-row>
        <div id="tabs" style="background-color: #F2F2F2;">

          <ul>
            <li style="box-shadow: 2px 2px 2px 1px #888888;">
              <a href="#a" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 1</a>
            </li>
            <li style="box-shadow: 2px 2px 2px 1px #888888;">
              <a href="#b" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 2</a>
            </li>
            <li style="box-shadow: 2px 2px 2px 1px #888888;">
              <a href="#c" style="font-style: Arial; font-size: 14px; color:#666666;">Vertical Tab 3</a>
            </li>
          </ul>


          <div id="a" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
            something writes here 1
          </div>
          <div id="b" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
            something writes here 2
          </div>
          <div id="c" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
            something writes here 3
          </div>

        </div>
      </ons-row>
    </ons-list-item>
  </ons-page>
</ons-navigator>

修改

我在CSS中有这个

*, *:before, *:after {
    box-sizing: border-box;

我在box-sizing: none !important CSS样式中使用了#a,#b,#c，但它无效！

4 个答案:

答案 0 :(得分：1)

您可以使用此代码：

   .ui-tabs.ui-tabs-vertical .ui-tabs-panel{left: 0;}/*this div remove left:15px*/

    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {/***box shadow add in active li*/
        border-left: 4px solid #7fcc28;
        box-shadow: -3px 1px 2px 1px #888888 !important;
        margin-bottom: 0.2em;
        padding-bottom: 0;
    }

答案 1 :(得分：1)

可能不是最佳答案，尽管它 工作。

我在标签上添加了右边框（20px纯白色），

然后使用以下命令更改内容面板的z-index 

#a,#b,#c{
    z-index:50;    
}

哪个有用。

所以最后的小提琴将是：

something like this

摘录（全屏查看）

$(document).ready(function() {
  ons.bootstrap();
  $('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
});
.ui-tabs.ui-tabs-vertical {
    padding: 0;
    width: 42em;
	margin-left: 6%;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
    border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
    float: left;
    width: 10em;
    background: #F2F2F2;
    border-radius: 4px 0 0 4px;
   
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 100%;
    margin: 0.2em 0;
    border: none;
    border-width: 1px 0 1px 1px;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    right: -2px;
    z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
    width: 100%;
    padding: 0.6em 1em;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
    cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0.2em;
    padding-bottom: 0;
    width:200px;
    border-right:20px solid white;
    border-left: 4px solid #7fcc28;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
    margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
    float: left;
    width: 23em;
    border-left: none;
    border-radius: 0;
    position: relative;
    left: 10px;
	top: 7px;
}
#a,#b,#c{
    z-index:50;
  box-sizing: none;
}

*, *:before, *:after {
    box-sizing: border-box;
    outline:0;
  }
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsenui.css">
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://onsen.io/OnsenUI/build/js/angular/angular.js"></script>
<script src="http://onsen.io/OnsenUI/build/js/onsenui.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<ons-navigator>
  <ons-page>

    <div style="min-height: 150px;"></div>
    <ons-list-item modifier="tappable" style="line-height: 500px; padding: 0 45px; background-color: #F2F2F2;">
      <ons-row>
        <div id="tabs" style="background-color: #F2F2F2;">

          <ul>
            <li style="box-shadow: 2px 2px 2px 1px #888888;">
              <a href="#a" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 1</a>
            </li>
            <li style="box-shadow: 2px 2px 2px 1px #888888;">
              <a href="#b" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 2</a>
            </li>
            <li style="box-shadow: 2px 2px 2px 1px #888888;">
              <a href="#c" style="font-style: Arial; font-size: 14px; color:#666666;">Vertical Tab 3</a>
            </li>
          </ul>


          <div id="a" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
            something writes here 1
          </div>
          <div id="b" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
            something writes here 2
          </div>
          <div id="c" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
            something writes here 3
          </div>

        </div>
      </ons-row>
    </ons-list-item>
  </ons-page>
</ons-navigator>

<强>更新

  • 我更改了标签的宽度以“修复”此内容。

虽然我想提及在你的CSS中使用*是不好的做法（通常），出于这个原因。

答案 2 :(得分：0)

这样的东西？ （你必须在整页中查看:)）

＆＃13;
＆＃13; 
$(document).ready(function(){
    ons.bootstrap();
$('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
});
＆＃13; 
.ui-tabs.ui-tabs-vertical {
    padding: 0;
    width: 42em;
	margin-left: 6%;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
    border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
    float: left;
    width: 10em;
    background: #F2F2F2;
    border-radius: 4px 0 0 4px;
   
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 100%;
    margin: 0.2em 0;
    border: none;
    border-width: 1px 0 1px 1px;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    right: -0.8em; /*modified*/
    z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
    width: 100%;
    padding: 0.6em 1em;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
    cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0.2em;
    padding-bottom: 0;
    border-left: .3em solid #7fcc28; /*modified px to em*/
    background: #fff;
    width: 9.7em; /*added*/
    z-index:7; /*added*/
    box-shadow:0px 5px 2px -2px #888888 !important; /*added, important is for override inline style*/
    
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
    margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
    float: left;
    width: 23em;
    border-left: none;
    border-radius: 0;
    position: relative;
    left: 10px;
	top: 7px;
    z-index:5; /*added*/
}
＆＃13; 
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="http://onsen.io/OnsenUI/build/css/onsenui.css" rel="stylesheet"/>
<script src="http://onsen.io/OnsenUI/build/js/angular/angular.js"></script>
<script src="http://onsen.io/OnsenUI/build/js/onsenui.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<ons-navigator>
<ons-page>

			<div style="min-height: 150px;"></div>
<ons-list-item modifier="tappable" style="line-height: 500px; padding: 0 45px; background-color: #F2F2F2;">
<ons-row>
			<div id="tabs" style="background-color: #F2F2F2;">
  
	<ul>
        <li style="box-shadow: 2px 2px 2px 1px #888888;">
            <a href="#a" style="font-style: Arial; font-size: 14px; color: #666666;" >Vertical Tab 1</a>
        </li>
        <li style="box-shadow: 2px 2px 2px 1px #888888;">
            <a href="#b" style="font-style: Arial; font-size: 14px; color: #666666;">Vertical Tab 2</a>
        </li>
        <li style="box-shadow: 2px 2px 2px 1px #888888;">
            <a href="#c" style="font-style: Arial; font-size: 14px; color:#666666;">Vertical Tab 3</a>
        </li>
    </ul>


    <div id="a" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
        something writes here 1
    </div>
    <div id="b" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
               something writes here 2
    </div>
    <div id="c" style="box-shadow: 2px 2px 2px 1px #888888; background-color: #FFFFFF;">
              something writes here 3
    </div>

</div>
</ons-row>
</ons-list-item>
</ons-page>
</ons-navigator>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：-1)

你的问题没有措辞得很清楚。问题是文本在正在查看的div中的位置。如果是这样，请查看this pen的代码。

$(function() {
  "use strict";

  var hl,
    newsList = $('.news-headlines'),
    newsListItems = $('.news-headlines li'),
    firstNewsItem = $('.news-headlines li:nth-child(1)'),
    newsPreview = $('.news-preview'),
    elCount = $('.news-headlines').children(':not(.highlight)').index(),
    vPadding = (parseInt(firstNewsItem.css('padding-top').replace('px', ''), 10)) +
    (parseInt(firstNewsItem.css('padding-bottom').replace('px', ''), 10)),
    vMargin = (parseInt(firstNewsItem.css('margin-top').replace('px', ''), 10)) +
    (parseInt(firstNewsItem.css('margin-bottom').replace('px', ''), 10)),
    cPadding = (parseInt($('.news-content').css('padding-top').replace('px', ''), 10)) +
    (parseInt($('.news-content').css('padding-bottom').replace('px', ''), 10)),
    speed = 5000, // this is the speed of the switch
    myTimer = null,
    siblings = null,
    totalHeight = null,
    indexEl = 1,
    i = null;

  // the css animation gets added dynamicallly so 
  // that the news item sizes are measured correctly
  // (i.e. not in mid-animation)
  // Also, appending the highlight item to keep HTML clean
  newsList.append('<li class="highlight nh-anim"></li>');
  hl = $('.highlight');
  newsListItems.addClass('nh-anim');

  function doEqualHeight(c) {

    if (newsPreview.height() < newsList.height()) {
      newsPreview.height(newsList.height());
    } else if ((newsList.height() < newsPreview.height()) && (newsList.height() > parseInt(newsPreview.css('min-height').replace('px', ''), 10))) {
      newsPreview.height(newsList.height());
    }

    if ($('.news-content:nth-child(' + c + ')').height() > newsPreview.height()) {
      newsPreview.height($('.news-content:nth-child(' + c + ')').height() + cPadding);
    }
  }

  function doTimedSwitch() {

    myTimer = setInterval(function() {
      if (($('.selected').prev().index() + 1) === elCount) {
        firstNewsItem.trigger('click');
      } else {
        $('.selected').next(':not(.highlight)').trigger('click');
      }
    }, speed);

  }

  $('.news-content').on('mouseover', function() {
    clearInterval(myTimer);
  });

  $('.news-content').on('mouseout', function() {
    doTimedSwitch();
  });

  function doClickItem() {

    newsListItems.on('click', function() {

      newsListItems.removeClass('selected');
      $(this).addClass('selected');

      siblings = $(this).prevAll();
      totalHeight = 0;

      // this loop calculates the height of individual elements, including margins/padding
      for (i = 0; i < siblings.length; i += 1) {
        totalHeight += $(siblings[i]).height();
        totalHeight += vPadding;
        totalHeight += vMargin;
      }

      // this moves the highlight vertically the distance calculated in the previous loop
      // and also corrects the height of the highlight to match the current selection
      hl.css({
        top: totalHeight,
        height: $(this).height() + vPadding
      });

      indexEl = $(this).index() + 1;

      $('.news-content:nth-child(' + indexEl + ')').siblings().removeClass('top-content');
      $('.news-content:nth-child(' + indexEl + ')').addClass('top-content');

      clearInterval(myTimer);
      // comment out the line below if you don't
      // want it to rotate automatically
      doTimedSwitch();
      doEqualHeight(indexEl);
    });

  }

  function doWindowResize() {

    $(window).resize(function() {

      clearInterval(myTimer);
      // click is triggered to recalculate and fix the highlight position
      $('.selected').trigger('click');

    });

  }

  // this is the poor man's 'init' section
  doClickItem();
  doWindowResize();
  $('.selected').trigger('click');

});
body {
  background-color: lightgrey;
}
h1 {
  text-align: center;
}
.news-demo {
  background: #fff;
  padding: 20px;
}
.news-demo h1 {
  text-align: center;
  font-family: Arial, sans-serif;
  color: #777;
  margin-bottom: 40px;
}
.news-demo .p {
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 22px;
  margin-top: 70px;
}
.news-demo .p ~ p {
  margin-top: 0;
}
.news-demo .p a {
  text-decoration: underline;
}
.news-demo .p a:hover {
  color: red;
}
.news-holder p {
  margin-bottom: 12px;
}
.news-holder {
  max-width: 500px;
  margin: 0 auto;
  font-family: Verdana, sans-serif;
  font-size: 13px;
}
.news-holder * {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  color: #336699;
  text-decoration: none;
}
.news-headlines {
  list-style: none;
  position: relative;
}
.news-headlines li {
  padding: 5px 20px 5px 24px;
  margin-bottom: 15px;
  position: relative;
  z-index: 20;
  color: #336699;
}
.nh-anim {
  -webkit-transition: all .75s ease-out;
  -moz-transition: all .75s ease-out;
  -o-transition: all .75s ease-out;
  transition: all .75s ease-out;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.news-headlines li:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #888;
  vertical-align: middle;
  margin-left: -12px;
  margin-right: 7px;
}
.news-headlines li:hover,
a:hover {
  cursor: pointer;
  text-decoration: underline;
}
.news-headlines .highlight {
  width: 100%;
  background: #ededed;
  border-top: solid 1px #999;
  border-left: solid 1px #999;
  border-bottom: solid 1px #999;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.news-headlines .highlight:before {
  display: none;
}
.news-headlines {
  float: left;
  width: 49%;
}
.news-preview {
  float: left;
  border: solid 1px #999;
  width: 51%;
  background: #ededed;
  position: relative;
  z-index: 5;
  margin-left: -1px;
  min-height: 304px;
  position: relative;
}
.news-preview img {
  display: block;
  border: solid 1px #999;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto 5px auto;
}
.news-content {
  position: absolute;
  background: #ededed;
  z-index: 10;
  padding: 10px;
  top: 0;
  left: 0;
  display: none;
}
.top-content {
  display: block;
}
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.cf:after {
  clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.cf {
  *zoom: 1;
}
 <h1>jQuery Vertical News Slider</h1>

<div class="news-holder cf">

  <ul class="news-headlines">
    <li class="selected">100 red bicycles stolen from local bike store</li>
    <li>New leash laws in effect for floppy-eared dogs</li>
    <li>Insider: Can palm trees be saved?</li>
    <li>Fresh recipes to titillate the taste buds</li>
    <li>Truck inspections under way for the metropolitan area</li>
    <li>Are the beaches safe for swimming this year?</li>
    <!-- li.highlight gets inserted here -->
  </ul>

  <div class="news-preview">

    <div class="news-content top-content">
      <img src="http://cdn.impressivewebs.com/news1.jpg">
      <p><a href="#">100 red bicycles stolen from local bike store</a>
      </p>

      <p>A hundred red bicycles were stolen from under our noses yesterday, and nobody knows what went wrong.</p>
    </div>
    <!-- .news-content -->

    <div class="news-content">
      <img src="http://cdn.impressivewebs.com/news2.jpg">
      <p><a href="#">New leash laws in effect for floppy-eared dogs</a>
      </p>

      <p>Ears on dogs can be a tricky thing. Find out more about this amazing story and why these dogs are a nuisance.</p>
    </div>
    <!-- .news-content -->

    <div class="news-content">
      <img src="http://cdn.impressivewebs.com/news3.jpg">
      <p><a href="#">Insider: Can palm trees be saved?</a>
      </p>

      <p>Ah, the palm tree. It feeds us, it shades us, it does whatever we ask. We should think about it more deeply.</p>
    </div>
    <!-- .news-content -->

    <div class="news-content">
      <img src="http://cdn.impressivewebs.com/news4.jpg">
      <p><a href="#">Fresh recipes to titillate the taste buds</a>
      </p>

      <p>Food is great. These recipes will make you appreciate food as if it were even greater than great. It will be super great.</p>
    </div>
    <!-- .news-content -->

    <div class="news-content">
      <img src="http://cdn.impressivewebs.com/news5.jpg">
      <p><a href="#">Truck inspections under way for the metropolitan area</a>
      </p>

      <p>The Sherrif's department has put out an APB on these trucks. You know, this is the kind of thing that only happens in small towns.</p>
    </div>
    <!-- .news-content -->

    <div class="news-content">
      <img src="http://cdn.impressivewebs.com/news6.jpg">
      <p><a href="#">Are the beaches safe for swimming this year?</a>
      </p>

      <p>Giant orange pedal boats have been spotted at various beaches. In this report we tell you some ridiculous precautions to take.</p>
    </div>
    <!-- .news-content -->

  </div>
  <!-- .news-preview -->

</div>
<!-- .news-holder -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="js/jquery-1.8.1.min.js"><\/script>')
</script>

<script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1965499-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();
</script>

相关问题
最新问题