0

この基本的なフォームを 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 の開発ツールでは検査できず、ソース コードにも表示されません。オンラインのすべての検索で、そのようなことについての言及は見つかりませんでした。

これが何であるか、そしてそれを取り除く方法はありますか? ありがとう!!

4

0 に答える 0