純粋な CSS_html/css_WEB-ITnose を使用して子要素の適応幅と中央揃えを実装する方法

上の図に示すように、赤い部分の DIV 幅は 100%、青い部分は子要素、子要素には border-bottom があり、右側に二重矢印があります。テキストの側面。

現在の要件は次のとおりです:
1. JS とテーブルを使用しない純粋な CSS 実装。
2. テキストはユーザーによって入力されるため、各行のテキスト幅は固定されません。ただし、テキストは 2 行ではなく 1 行のみを考慮します。改行を無効にするには、white-space:nowrap; を使用します。 。
3. 各子要素の右側の二重矢印は、テキストの最も長い行との距離が 10 ピクセルに固定されている必要があります。その線上の二重矢印。
4. これはモバイル Web ページであるため、主流のモバイル ブラウザーがサポートしている限り、CSS3 と HTML5 の使用を検討できます。

上記の要件を達成する方法はありますか。純粋な CSS を使用するのはどの程度具体的ですか? 画像のように表示できる限り、HTML は自由に記述できます。

ディスカッション（解決策）への返信

こちらもどうぞ右 二重矢印とテキストの最長行の間の距離は 10px に固定され、他の行の二重矢印は二重矢印に合わせて配置されます

<div class="iprocat">	<ul>		<li><a href="/index.php?catid=8">American Axle</a></li>		<li><a href="/index.php?catid=9">Germanic Axle</a></li>		<li><a href="/index.php?catid=10">Suspension</a></li>		<li><a href="/index.php?catid=11">Bogie</a></li>		<li><a href="/index.php?catid=12">Brake Drum</a></li>		<li><a href="/index.php?catid=13">Axle</a></li>		<li><a href="/index.php?catid=14">Brake Disc</a></li>		<li><a href="/index.php?catid=15">Brake Shoe</a></li>		<li><a href="/index.php?catid=16">Wheel Hub</a></li>		<li><a href="/index.php?catid=17">King Pin Series</a></li>		<li><a href="/index.php?catid=18">Fifth Wheel Series</a></li>	</ul></div>

*{margin:0;padding:0;outline:none;}body{font:menu;font-size:0.24rem;}a{text-decoration:none;color:#333;}a:hover{text-decoration:underline;color:#d00;}li{list-style:none;}img{border:none;vertical-align:top;}@font-face {  font-family: 'iconfont';  src: url('//at.alicdn.com/t/font_1460087185_4783318.eot'); /* IE9*/  src: url('//at.alicdn.com/t/font_1460087185_4783318.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  url('//at.alicdn.com/t/font_1460087185_4783318.woff') format('woff'), /* chrome、firefox */  url('//at.alicdn.com/t/font_1460087185_4783318.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  url('//at.alicdn.com/t/font_1460087185_4783318.svg#iconfont') format('svg'); /* iOS 4.1- */}.iprocat{background:url(../images/iprocat-bg.jpg);text-align:center;overflow:hidden;}.iprocat ul{display:inline-block;text-align:left;font-size:.24rem;line-height:.4rem;padding-bottom:.24rem;}.iprocat li{border-bottom:1px solid #ddd;position:relative;}.iprocat li:before,.iprocat li:after{content:'';border-bottom:1px solid #ddd;width:100%;position:absolute;bottom:-1px;}.iprocat li:before{right:100%;}.iprocat li:after{left:100%;}.iprocat li a{color:#666;display:block;}.iprocat li a:before{content:'\e604';font-family:'iconfont';float:right;color:#ddd;margin-left:.1rem;}

視覚的には実現できますが、border-bottom は :before と :after を組み合わせることで実現されます。より良い方法があるかどうかはわかりません