对齐在线内容

我正在使用jQuery选框插件来实现选取框效果。现在的问题是我想实现这种对齐。对齐在线内容

现在看我的解决方案。我想要在上述图像的同一行选框文本上的“Treading”按钮。

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

在此先感谢您的努力。

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

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

<!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>

来源

2016-08-26 Kishan Patel

对于'.marquee'，如何减少宽度来表示宽度：92％;？ – vijayP

也许你应该使用'span'而不是'div'来代替'

jQuery marquee is the best marquee plugin in the world

' – Qsprec

随着Flexbox的（在旧的浏览器不工作）：

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

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

<!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>

我也改变速度，如果你想复制

改回来

来源

2016-08-26 07:16:03

很好。感谢您的帮助 –

你可以简单地浮动元素向左和使用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>

来源

2016-08-26 07:17:52

使用花车选取框的宽度设置为屏幕长度减键长度可以达到西隧正是ü希望

$("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>

来源

2016-08-26 07:31:33

对齐在线内容

回答

相关问题