| |
|
|
| | Как можно состыковать input и div блок чтобы они были одинаковы по высоте?
Я сделал так:
<html>
<head>
<title>Page</title>
<style>
.in1{
background-color: White;
border-bottom: 2px solid #44008A;
border-left: 1px solid #44008A;
border-top: 1px solid #44008A;
border-right: 0px;
font: bold 18px Cambria;
width: 250px;
text-align: left;
padding: 2px;
margin: 0px;
}
.sel1{
background-color: White;
border-bottom: 2px solid #44008A;
border-right: 1px solid #44008A;
border-top: 1px solid #44008A;
border-left: 0px;
font: bold 18px Cambria;
width: 150px;
text-align: center;
padding: 2px;
margin: 0px;
display: inline-block;
*display: inline;/*для IE*/
}
</style>
</head>
<body>
<form>
<input type="text" name="qq" class="in1" value="текст"/><div class="sel1">блок</div>
</form>
</body>
</html>
|
В Opere и Firefox все нормально, а вот в IE div блок получается выше чем input, кстати если у боих елемнтов указать height, то они вобще становятся сильно смещены | |
| |
|
|
| |
|
|
| |
для: Gendalf
(01.03.2009 в 15:21)
| | | А не проще ли будет:
1. <DIV> заменить на <SPAN> (не будет заморочек со свойством display)
2. оставить <INPUT> без бордеров и поместить его вместе со <SPAN> внутрь внешнего <DIV>, которому и прописать нужные бордеры и общую ширину (правил стилей будет поменьше, проблема со смещением по высоте исчезнет вовсе)
<html>
<head>
<title>Page</title>
<style>
.ww {
border: 1px solid #44008A;
border-bottom-width: 2px;
width: 402px;
}
.ww input, .ww span {
background-color: #fff;
font: bold 18px Cambria;
padding: 2px;
}
.ww input {
border: none;
width: 250px;
}
.ww span {
width: 150px;
text-align: center;
}
</style>
</head>
<body>
<form>
<div class="ww"><input name="qq" value="инпут" /><span>блок</span></div>
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: PAT
(01.03.2009 в 15:53)
| | | спасибо!! не ожидал что все так просто решается | |
| |
|
|
| |
|
|
| |
для: Gendalf
(01.03.2009 в 15:21)
| | | Высота разная из-за разной интерпретации блочной модели разными браузерами. Лучший подход - использовать reset css и фиксы блочной модели
div, input {
box-sizing: border-box; /* IE8, Konqueror, Chrome, Opera */
-moz-box-sizing: border-box; /* Mozilla */
-webkit-box-sizing: border-box; /* Safary */
-ms-box-sizing: border-box; /* IE8b1 */
}
|
| |
| |
|
|
