如何水平自动创建导航菜单的overflow-x

Question

<div style="width:320px">
  <div class="menu-name owl-carousel owl-theme">
    <div class="item">
      <div class="name quicksand aktip" id="one">Profile</div>
    </div>
    <div class="item">
      <div class="name quicksand aktip" id="two">About us</div>
    </div>
  </div>
</div>

JS

var $owl = $('.owl-carousel');
            $owl.owlCarousel({
                center: false,
                margin: 0,
                autoWidth:true,
            });

当我写About us时会遇到两行问题。当我写About就是我需要的那一行时。我想继续写about us和一行

这是我的完整代码https://jsfiddle.net/dedi_wibisono17/0npx9g15/18/

Answer 1

这是您想要的吗？

我删除了

 center: false,
 autoWidth:true,

来自

$owl.owlCarousel({
      margin: 0,
});

var $owl = $('.owl-carousel');
$owl.owlCarousel({
  margin: 0,
});

$('.owl-carousel').on('click', '.owl-item.active', function(e) {
  var carousel = $('.owl-carousel').data('owl.carousel');
  e.preventDefault();
  carousel.to(carousel.relative($(this).index()), false, true);
});


//add class aktip
$(".name").click(function(e) {
  var id = $(this).attr("id");
  var toShow = '#show-' + id;

  $(".name").removeClass("aktip");
  $(this).addClass("aktip")

  $(".isi-content").not(toShow).hide();
  $(toShow).fadeIn();
});

.menu-name {
  background: tomato;
  color: white;
  border-bottom: 2px solid #eaeaea;
  overflow-x: auto;
  white-space: nowrap;
}

.name {
  border: 1px solid white;
  padding: 10px;
  cursor: pointer;
  margin: 8px;
  transition: margin 0.4s ease;
}

.aktip {
  background: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div style="width:320px">
  <div class="menu-name owl-carousel owl-theme">
    <div class="item">
      <div class="name quicksand aktip" id="one">Profile</div>
    </div>
    <div class="item">
      <div class="name quicksand" id="two">About Us</div>
    </div>
    <div class="item">
      <div class="name quicksand" id="three">Gallery</div>
    </div>
    <div class="item">
      <div class="name quicksand" id="four">Contact</div>
    </div>
    <div class="item">
      <div class="name quicksand" id="five">Details</div>
    </div>
  </div>
</div>