gpt4 book ai didi

html - 资源管理器和 Chrome 中的 div 宽度太大

转载 作者:行者123 更新时间:2023-11-28 15:08:50 25 4
gpt4 key购买 nike

我有一个名为“wrapper”的 div,其中包含输入字段。在 Firefox 中一切看起来都不错,但如果我在 Explorer 和 Chrome 中运行我的代码,我的包装器的宽度太大并且它的位置跳到右边。这是我的 CSS 代码:

  html, body {
height: 100%;
margin: 0;
padding: 0;
}

#type {

padding: 5px;
border: 0.5px solid LightGray;
width: 250px;
color: #707070;
font-size: 15px;
border-radius: 4px;

}

#address, #lng, #lat {
width: 100%;
padding: 3px;
border: 0.5px solid LightGray;
color: #707070;
font-size: 13px;
border-radius: 4px;

}


label {
color: #707070;
}

#wrapper {
position: fixed;
top: 10px;
left: 2%;
z-index: 5;
background-color: #fff;
padding: 15px;
text-align: rigth;
line-height: 30px;
padding-left: 10px;
border-radius: 2px;
opacity: 0.95;
}

这是我的 html 文件。

<body>
<div id="wrapper">

<input id="input-id" type="file" class="file-loading" multiple>
<br/>
<select id="type" title="Select Map Version" onchange="filterMarkers(this.value);">
<option value="all">All Map Versions</option>
</select><br/><br/>

<label for="adress">Adresse:</label><input id="address" type="textbox"></input><br/><br/>
<input id="submit" type="button" class="btn btn-dark" value="search"><br/><br/>

<label for="Long">Longitude:</label><input id="lng" type="textbox"></input><br/>
<label for="Lat">Latitude:</label><input id="lat" type="textbox"></input><br/><br/>
<input id="submit2" type="button" class="btn btn-dark" value="search"><br/><br/>


</div>

最佳答案

如果删除 </input>,您的代码应该可以正常工作秒。运行下面的代码片段:我在 FF 和 Chrome 中都运行它,表单字段显示在左侧。

  html, body {
height: 100%;
margin: 0;
padding: 0;
}

#type {

padding: 5px;
border: 0.5px solid LightGray;
width: 250px;
color: #707070;
font-size: 15px;
border-radius: 4px;

}

#address, #lng, #lat {
width: 100%;
padding: 3px;
border: 0.5px solid LightGray;
color: #707070;
font-size: 13px;
border-radius: 4px;

}


label {
color: #707070;
}

#wrapper {
position: fixed;
top: 10px;
left: 2%;
z-index: 5;
background-color: #fff;
padding: 15px;
text-align: rigth;
line-height: 30px;
padding-left: 10px;
border-radius: 2px;
opacity: 0.95;
}
<div id="wrapper">

<input id="input-id" type="file" class="file-loading" multiple>
<br/>
<select id="type" title="Select Map Version" onchange="filterMarkers(this.value);">
<option value="all">All Map Versions</option>
</select><br/><br/>

<label for="adress">Adresse:</label><input id="address" type="textbox"><br/><br/>
<input id="submit" type="button" class="btn btn-dark" value="search"><br/><br/>

<label for="Long">Longitude:</label><input id="lng" type="textbox"><br/>
<label for="Lat">Latitude:</label><input id="lat" type="textbox"><br/><br/>
<input id="submit2" type="button" class="btn btn-dark" value="search"><br/><br/>


</div>

关于html - 资源管理器和 Chrome 中的 div 宽度太大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48869980/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com