Question

我想知道如何让这两个元素垂直对齐。下面强调的方法不起作用。请参阅live demo here。

<?php
$w.="<html><head><title>Activity</title></head><body>\n";
$w.="<form action={$_SERVER["PHP_SELF"]} method=post>\n";
$w.="<select name=listbox1 style=\"height:20px; width:100px\" vertical-align:top>\n";
$w.=" <option value=value1>option1</option>\n";
$w.=" <option value=value2>option2</option>\n";
$w.=" <option value=value3>option3</option>\n";
$w.="</select>\n";
$w.="<textarea name=value2 style=\"height:20px; width:200px\" vertical-align:top></textarea></br>\n";
$w.="</form></body></html>";
echo $w;
?>

Answer 1

你错过了在select和textarea中的样式中的结束引号：

 style=\"height:20px; width:100px\" vertical-align:top>

要

style=\"height:20px; width:100px vertical-align:top\">

完整脚本

<?php
    $w.="<html><head><title>Activity</title></head><body>\n";
    $w.="<form action={$_SERVER["PHP_SELF"]} method=post>\n";
    $w.="<select name=listbox1 style=\"height:20px; width:100px; vertical-align:top\">\n"; //This line edited
    $w.=" <option value=value1>option1</option>\n";
    $w.=" <option value=value2>option2</option>\n";
    $w.=" <option value=value3>option3</option>\n";
    $w.="</select>\n";
    $w.="<textarea name=value2 style=\"height:20px; width:200px vertical-align:top\"></textarea></br>\n"; //This line edited
    $w.="</form></body></html>";
    echo $w;
?>

Answer 2

试试这个：

<?php
        $w.="<html><head><title>Activity</title></head><body>\n";
        $w.="<form action={$_SERVER["PHP_SELF"]} method=post>\n";
        $w.="<select name=listbox1 style=\"height:20px; width:100px; vertical-align:top\">\n";
        $w.=" <option value=value1>option1</option>\n";
        $w.=" <option value=value2>option2</option>\n";
        $w.=" <option value=value3>option3</option>\n";
        $w.="</select>\n";
        $w.="<textarea name=value2 style=\"height:20px; width:200px; vertical-align:top\"></textarea></br>\n";
        $w.="</form></body></html>";
        echo $w;
        ?>

垂直对齐顶部SELECT与TEXTAREA

2 个答案: