Question

我使用jQuery marquee插件来实现选框效果。现在的问题是我希望实现这种对齐。

现在看看我的解决方案。我想要那个＆＃34; Treading＆＃34;与上图相同的选框文字行上的按钮。

任何人都可以帮我解决这个问题吗？

先谢谢你的努力。

＆＃13;

$("document").ready(function(){
  $('.marquee').marquee({
    allowCss3Support: true,
    easing: 'linear',
    delayBeforeStart: 1000,
    direction: 'left',
    pauseOnHover: true,
    speed: 18000,
    gap: 20
  });
});

＆＃13;

.marquee {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  background: #ddd;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
  <section>
      <p class="btn btn-primary btn-sm"> Trending
        <div class="marquee">jQuery marquee is the best marquee plugin in the world</div>
      </p>
   </section>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js"></script>
</body>

＆＃13;

Answer 1

使用flexbox（不在旧版浏览器中使用）：

＆＃13;

$("document").ready(function(){
  $('.marquee').marquee({
    allowCss3Support: true,
    easing: 'linear',
    delayBeforeStart: 1000,
    direction: 'left',
    pauseOnHover: true,
    speed: 1000,
    gap: 20
  });
});

＆＃13;

.marquee {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  background: #ddd;
}
.wrapper-markee{
  display: flex; 
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
  <section class="wrapper-markee">
      <p class="btn btn-primary btn-sm"> Trending
        <div class="marquee">jQuery marquee is the best marquee plugin in the world</div>
      </p>
   </section>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js"></script>
</body>

＆＃13;

我也改变了速度，如果要复制则改回来

Answer 2

你可以简单地将元素浮动到左边，并使用css calc

将选框的宽度设置为屏幕长度减去按钮长度

$("document").ready(function() {
  $('.marquee').marquee({
    allowCss3Support: true,
    easing: 'linear',
    delayBeforeStart: 1000,
    direction: 'left',
    pauseOnHover: true,
    speed: 18000,
    gap: 20
  });
});

.marquee {
  display: inline-block;
  width: calc(100% - 69px);
  overflow: hidden;
  background: #ddd;
  float: left;
  height: 30px;
}
.btn {
  float: left;
  width: 69px;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
  <section>
    <span class="btn btn-primary btn-sm"> Trending </span>
    <div class="marquee">jQuery marquee is the best marquee plugin in the world</div>

  </section>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js"></script>
</body>

Answer 3

使用浮动你可以实现你想要的

$("document").ready(function() {
  $('.marquee').marquee({
    allowCss3Support: true,
    easing: 'linear',
    delayBeforeStart: 1000,
    direction: 'left',
    pauseOnHover: true,
    speed: 18000,
    gap: 20
  });
});

.marquee {
  display: inline-block;
  width: calc(100% - 69px);
  overflow: hidden;
  background: #ddd;
  height: 30px;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
  <section>
    <span class="btn btn-primary btn-sm" style="float: left;"> Trending </span>
    <div class="marquee" style=" float: left;">jQuery marquee is the best marquee plugin in the world</div>
<div style="clear:left;"></div>
  </section>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js"></script>
</body>

在线对齐内容

3 个答案: