大家好我有讓我跨度的工作像我想要的一些問題。我有一個警報，並在表頭一個搜索輸入框，我想在搜索框中浮動權和警報，以填補空間的其餘搜索框的左側。在所附的plunker我已經得到了通過設置搜索框的寬度，然後將匹配的右緣上的警報工作，但看來這是一個非常骯髒的方式做到這一點。跨度重疊問題
<span style="float:right;"><input class="form-control" style="margin-bottom: 0px;width:200px;" placeholder="global search ..." type="text" /></span>
<span class="alert alert-success" style="display:block;margin-right:210px;" role="alert">I don't want this to overlap the search</span>
有沒有人知道更好的方法來實現這個目標？下面是我的plunkr
更新。如果你不喜歡的保證金，就可以代替calc下寬度：
<th colspan="6">
<span style="float:right;"><input class="form-control" style="margin-bottom: 0px;width:200px;" placeholder="global search ..." type="text" /></span>
<span class="alert alert-success" style="display:block;width:calc(100% - 210px);" role="alert">I don't want this to overlap the search</span>
</th>
https://plnkr.co/edit/Aq45ZTXzR6i1vDEWEhSj?p=preview
在我看來最清潔的選擇是儘管如此，因爲這實際上就是這樣。
<th colspan="6">
<div style="display:flex;align-items: stretch;justify-content: space-between;">
<span class="alert alert-success" style="display:block;flex:1;margin-right:10px;" role="alert">I don't want this to overlap the search</span>
<input class="form-control" style="margin-bottom: 0px;width:200px" placeholder="global search ..." type="text" />
</div>
</th>
鏈接試試這個：
inline-block，而不是block它允許你刪除所有的利潤和東西
此外，使用div不span - div是一個塊級元素
<div style="float:right;"><input class="form-control" style="display: inline-block; margin-bottom: 0px;" placeholder="global search ..." type="text" /></div>
<div class="alert alert-success" style="display:inline-block;" role="alert">I don't want this to overlap the search</div>
那種作品，但我想綠色警報，以填補整個寬度搜索欄的左側。 Div在表頭中不受支持，所以我必須使用跨度。 –
然後我會拆分你的表格並將它設置爲'width：100％;' - 否則你必須設置寬度 - 如果網站將在很多設備上看到，寬度很差 - ％很好！ –
添加另一個plnkr @NathanKamenar –
這裏是一個很好的方法，使用calc()來拿出寬度。
見plunkr https://plnkr.co/edit/2KIdmCBjpe3expY5c4LD?p=preview
<span class="alert alert-success" style="display:block;width: calc(100% - 210px)" role="alert">I don't want this to overlap the search</span>
感謝這個我想要做什麼。 –
會有興趣聽到投票的原因。如果不正確或缺少某些東西，很樂意提高答案。 –