购买股票的客户卡CSS (百分比)
购买股票的客户卡CSS (百分比)
提问于 2019-09-02 05:16:59
请帮助我修复以下自定义卡在模式框内的CSS。
<!--Card-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<input type="text" id="market-search" onkeyup="marketSearch()" placeholder="Search for stock names..">
<i class="fa fa-times" data-dismiss="modal"></i>
</div>
<div class="modal-body">
<div class="container">
<div class="card stock-card" data-name="{{ stock.name }}">
<div class="card-body">
<h4 class="card-title">ABB India Ltd.</h4>
<div class="market-info">
<p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
<p class="card-text stock-info up" id="diff"> 9.45
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</p>
<p class="card-text stock-info"><strong>$</strong> <span id="price">1340</span></p>
<p class="card-text stock-info">ABB</p>
<input id="input_{{stock.code}}"/>
<a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>我的卡片在被渲染后看起来像下面。
我从引导程序中使用CSS。下面是我要重写的不同的CSS类。
.card {
margin-top: 2rem;
}
.card .card-title {
font-weight: 300;
}
.card .market-info .card-text {
font-weight: 400;
}
.card .market-info .stock-info
{
display: block;
float: left;
padding: 0 1em;
text-align: right;
}
.card .market-info .up {
color: green;
}
.card .market-info .down {
color: red;
}我想让这个模式盒和卡片干净，直观和专业。
- 作为第一步，我想把卡片上的所有东西都放在一条线上。也就是说，我想移动输入框(缩小输入框的大小，放置一个占位符，输入框中可以输入的值必须是百分比)和第一行本身的“购买”按钮(使其简短和直观)。
- 模态箱应该有一个滚筒。
我做不到。这里有什么帮助是非常感谢的吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-09-02 06:02:59
添加此CSS
.card .market-info p{
margin:0;
}
.card .market-info input{
max-width:60px;
margin-right:5px;
}
.card .market-info{
display:flex;
align-items: center;
}或
.card .market-info input{
max-width:60px;
padding:6px;
margin-right:5px;
}
.card .market-info .stock-info
{
display: block;
float: left;
padding: 0 10px;/*Change HERE*/
text-align: right;
}
.card .market-info{
display:flex;
align-items:center;
}
.card .market-info p{
margin:0;
}Stack Overflow用户
发布于 2019-09-02 05:39:41
您可以尝试flexbox并将overflow设置为auto。请查看以下内容：
.card {
margin-top: 2rem;
}
.card .card-title {
font-weight: 300;
}
.card .market-info .card-text {
font-weight: 400;
}
.card .market-info .stock-info {
display: block;
float: left;
padding: 0 1em;
text-align: right;
}
.card .market-info .up {
color: green;
}
.card .market-info .down {
color: red;
}
/*added code*/
.market-info {
display: flex;
align-items: center;
overflow: auto;
}
.card .market-info>p.stock-info {
display: flex;
align-items: center;
}<!--Card-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<input type="text" id="market-search" onkeyup="marketSearch()" placeholder="Search for stock names.." onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">
<i class="fa fa-times" data-dismiss="modal"></i>
</div>
<div class="modal-body">
<div class="container">
<div class="card stock-card" data-name="{{ stock.name }}">
<div class="card-body">
<h4 class="card-title">ABB India Ltd.</h4>
<div class="market-info">
<p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
<p class="card-text stock-info up" id="diff"> 9.45
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</p>
<p class="card-text stock-info"><strong>$</strong> <span id="price">1340</span></p>
<p class="card-text stock-info">ABB</p>
<input id="input_{{stock.code}}" />
<a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow( "{{stock.code}}", "{{stock.name|to_and}}", "{{stock.price}}", "{{stock.diff}}")>Buy</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
编辑:我编辑了我的帖子。现在所有的箭头和$符号都不会在另一条线上。如果还想创建动态宽度的输入框，请添加以下代码：
onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"参考：Adjust width of input field to its input
希望能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57751735
复制相关文章
相似问题
腾讯云开发者
