相关疑难解决方法(0)

XHTML 1.0严格的不等Html文本框和下拉宽度

我试图让两个输入(一个文本框,一个下拉)具有相同的宽度.您可以通过css设置宽度,但由于某种原因,选择框总是小几个像素.似乎这只发生在xhtml 1.0严格的doctype关于原因/解决方法的任何建议/想法？

拥有以下HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        .searchInput{
            width: 1000px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <form action="theAction" method="post" class="searchForm" >
        <fieldset>
            <legend>Search</legend>            
            <p>
                <!--<label for="name">Product name</label>-->
                <input class="searchInput" type="text" name="name" id="name" value="" />
            </p>
            <p>
                <!--<label for="ml2">Product Group</label>-->
                <select class="searchInput" name="ml2" id="ml2">
                    <option value="158">INDUSTRIAL PRIMERS/FILLERS</option>
                    <option value="168">CV CLEAR COATS</option>
                    <option value="171">CV PRIMERS/FILLERS</option>
                    <option value="" selected="selected">All</option>
                </select>
            </p>
            <input type="submit"  class="search"  value="Show"  name="Show"  id="Show"  />
            <input type="reset" value="Reset" name="reset" id="reset" class="reset"/>
        </fieldset>
    </form> …

Run Code Online (Sandbox Code Playgroud)

html css

Bor*_*ens

2008 10-02

9
推荐指数

2
解决办法

8697
查看次数

获取HTML textarea控件以扩展到容器的宽度

我希望我的textarea控件遵循标准块显示布局行为,以便它们扩展到包含父级的宽度.简单设置display:block;不会这样做 - 它们默认为默认值.设置width:100%;不起作用,因为控件中的任何填充意味着它们溢出容器边界.

HTML:

<div class='container'>
    <div >test</div>
</div>
<div class='container'>
    <textarea >test</textarea>
</div>?

Run Code Online (Sandbox Code Playgroud)

CSS:

.container {
    width:300px;
    border:black solid 1px;
    margin:10px;
}
.container > div {
    display:block;
    padding:10px;
    background:red;
}
.container > textarea {
    display:block;
    padding:10px;
    background:red;
}

Run Code Online (Sandbox Code Playgroud)

结果:

在此输入图像描述