に2つのDIVを整列thのテキストの右側にソートアイコンを追加したいtableがあります。ここに私の現在のコードは次のとおりです。TH
https://jsfiddle.net/4zhg76nr/
私が午前問題は、列が、解像度/ブラウザウィンドウのサイズのため、サイズが縮小されている場合、th内のテキストは、アイコンの上に移動してしまうことです。どのように私は常にアイコンの左にテキストを持っているCSSを使用することができますか？
ラップテキストとアイコンCSSの.sortableへとflexbox
<div class="flex-container">
<div class="label">
Order Number
</div>
<div class="sort-icons">
<cfoutput>
<div>
<a href="?sortBy=OrderNumber&sortOrder=ASC" title="Sort Ascending"><span class="ui-icon ui-icon-circle-triangle-n"></span></a>
</div>
<div>
<a href="?sortBy=OrderNumber&sortOrder=DESC" title="Sort Descending"><span class="ui-icon ui-icon-circle-triangle-s" style="display: block;"></span></a>
</div>
</cfoutput>
</div>
</div>
CSS
.flex-container {
display: flex;
}
ディスプレイを追加：インラインブロック。 flex-containerに
を使用しますが、最大幅とAを定義することができます積み重ねられないように各要素の浮動小数点数：
.sortable .label {
display: inline;
max-width:70%;
float:left;
height: 39px;
margin-right: 0.3em;
}
.sortable .sort-icons {
max-width:30%;
float: right;
display: inline;
width: 20px;
height: 39px;
}
このような変更：
.sortable .label {
display: inline;<------Change to inline-block;
margin-right: 0.3em;<--------Remove
width:85%;<------------Added
float:left;<-----------Added
height: 39px;
}
.sortable .sort-icons {
float: right;<--------Remove
display: inline;<------Change to inline-block;
width: 15%;<------Added
vertical-align: top;<----Added
height: 39px;
}
私はこれを試しましたが、それは私に意図した結果を与えません.... –
コード助けを求める質問は、質問自体に**それを再現するために必要な最短のコードを含める必要があります。**好ましく**スタックでスニペット**。あなたがリンクを提供したにもかかわらず、それが無効になるのであれば、あなたの質問は、同じ問題を抱える将来の他のSOユーザにとっては価値がないでしょう。 [**私のウェブサイトの何かが動作しないのは、リンクを貼り付けるだけです**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-リンクを張ることはできません）。 –
私は、経験している正確な問題を表示している実例にリンクしていることをお詫び申し上げます。コードはここに挿入されているので、今は1つではなく2つの場所にあります。 –
私は言った理由のため**リンク**を望んでいません。コードは** **の質問にする必要があります...それは基本的であり、規定された要件です –