この基本的なフォームを 2 つの列に分割しました。フォームは HTML<form>
であり、その中のエントリは<ul>
.
<form method="POST" action = "<?=$_SERVER['PHP_SELF']?>"> <?
echo '<div style="background:red;width:25%;margin-left:auto;margin-right:auto;text-align: center">';
//title text
echo '</div><br>';?>
<ul class="twocolumn">
<div class="firstcolumn" style="display: inline-block;width: 100%">
//a bunch of fields
</div>
<div class="secondcolumn" style="display: inline-block;width: 100%">
//the rest of the fields
</div>
</ul>
</form>
CSS を使用して、次のように定義し<ul>
たクラスを割り当てました。twocolumn
.twocolumn {
-webkit-column-count: 2;
}
それはうまく機能し、フォームを 2 つに分割します。ただし、Chrome で表示すると、左の列の最後のエントリの下に細い水平線が表示され、それを取り除くことができません。column-rule プロパティに関連しているようには見えません - column-rule の幅を 0 に設定しようとしましたが、何も変わりませんでした。Chrome の開発ツールでは検査できず、ソース コードにも表示されません。オンラインのすべての検索で、そのようなことについての言及は見つかりませんでした。
これが何であるか、そしてそれを取り除く方法はありますか? ありがとう!!