Question

我希望有两个输入，一个按钮供用户输入用户名和密码，和我正在使用这个css代码来控制我网站上的输入标签，以便在所有屏幕尺寸上正确显示它，并且它工作正常。

.controller {
 width: 98%;
 margin: 0;
 padding: 7px 5px 4px;
 color: #555;
 font-size: 18px;
 font-family: inherit;
 border-style: solid;
 border-width: 0 1px 1px 0;
    }

我希望在用户的这两个输入下面从数据库中检索一些动态文本。现在我的问题是，如果文本很长，它将无法正确显示在输入下方，并影响它们不适合屏幕，只要文本只有5到10个单词就没有问题。

这是输入的html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <form method="post" action="answer">
                <ul>
                    <li>
                        Login Name:<input type="text" name="id" class="controller"></input>
                    </li>
                    <li>
                        Password:<input type="password" name="pass" class="controller"></input>
                    </li>
                    <li>
                        <input type="submit" value="Login"></input>
                    </li>
                </ul>
    </form>     
</body>

这是CSS代码

 .controller {
 width: 98%;
 margin: 0;
 padding: 7px 5px 4px;
 color: #400;
 font-size: 18px;
 font-family: inherit;
 border-style: solid;
 border-width: 0 1px 1px 0;
    }

请任何人都可以告诉我我必须做什么或给出一个控制问题的CSS代码。

非常感谢你的回答，对不起我的长期问题感到抱歉。

Answer 1

所以，我认为这就是你想要做的。表格后，

<div id="response">
    <p> Some Long Block Of Text That Will Wrap Around This Div </p>
</div>

然后，在CSS中你会得到类似的结果：

#response
{
    width: 75px; /*desired width*/
    margin-top: 25px; /*distance from the form above*/
}
#response p
{
    /*anything you want to do to that specific <p> */
}

我不确定你是如何获得动态文本的，但我猜这是一个从answer获取信息并将其放入html的脚本。只需将该信息放在<p>

中的#response内

css适用于所有屏幕尺寸

1 个答案: