對齊在線內容

我正在使用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

對齊在線內容

回答

相關問題