I got the following simple HTML code:
我得到了以下简单的HTML代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div id="bar">
<span>
Palavra
</span>
<form>
<input class="buttom" type="submit" value="">
</form>
</div>
</body>
</html>
And my CSS code is like this:
我的CSS代码是这样的:
#bar{
width:100%;
height:7%;
background-color:#5959AB;
color:white;
font-family:"Arial";
font-size:150%;
font-weight: bold;
line-height: 190%;
}
.buttom{
background: url(icone_dicionario.jpg) no-repeat;
cursor: pointer;
width: 40px;
height: 41px;
}
input{
position:relative;
bottom:1000%;
left:13%;
}
html, body{
height:100%;
}
Take a look at the input
style on the CSS. The element it represents (a button in a dictionary icon) is obeying the horizontal position ("left: 13%
") i give it, but not the vertical (don't matter the value I put on it), as you can see:
看一下CSS上的输入样式。它所代表的元素(字典图标中的一个按钮)是服从我给它的水平位置(“左:13%”),而不是垂直(与我放在它上面的值无关),你可以看到:
can someone help me?
有人能帮我吗?
PS: I want the button to appear inside the bar, aside that word...
PS:我希望按钮出现在栏内,除了那个词......
4 个解决方案
#1
0
you probably want to make your div position relative and your button position absolute, then set the top position instead of the bottom. you can use negative numbers for the position as well.
你可能想让你的div位置相对而你的按钮位置是绝对的,然后设置顶部位置而不是底部。您也可以使用负数作为该位置。
#2
0
you set "position:relative;" for your input. the name "relative" implies that the element's position is relative to itself. if you want to make it vertical, you may choose one of the followings:
你设置“位置:相对;”为你的输入。名称“relative”表示元素的位置相对于自身。如果你想让它垂直,你可以选择以下之一:
- use top instead of botoom and use pixels (px) instead of percentage (%)
- use "position:absolute;" and use way smaller units or else the element will vanish from the visible part of the screen
使用top代替botoom并使用像素(px)代替百分比(%)
使用“position:absolute;”并使用较小的单位,否则元素将从屏幕的可见部分消失
if you want the icon to be inside the bar you must specify a position to the bar class. something like:
如果您希望图标位于栏内,则必须指定栏类的位置。就像是:
#bar
{
position:relative;
/* rest of css */
}
then you may use the absolute position for you icon. place in with top:0px; and right:0px; to make it "stick" to the top-right corner of your bar
那么你可以使用绝对位置为你的图标。放在上面:0px;和右:0px;使它“粘在”酒吧的右上角
#3
0
JSFiddle
Just add the attribute top: -40px; to the input style. Because the input's width is fixed.
只需添加属性top:-40px;到输入风格。因为输入的宽度是固定的。
input{
position:relative;
bottom:1000%;
left:13%;
top:-40px;
}
#4
0
Why not just use 'display: inline-block'?
为什么不使用'display:inline-block'?
eg.
#bar span {display: inline-block}
form {display: inline-block}
See the fiddle here: http://jsfiddle.net/pavkr/483pm2x6/2/
请看这里的小提琴:http://jsfiddle.net/pavkr/483pm2x6/2/
#1
0
you probably want to make your div position relative and your button position absolute, then set the top position instead of the bottom. you can use negative numbers for the position as well.
你可能想让你的div位置相对而你的按钮位置是绝对的,然后设置顶部位置而不是底部。您也可以使用负数作为该位置。
#2
0
you set "position:relative;" for your input. the name "relative" implies that the element's position is relative to itself. if you want to make it vertical, you may choose one of the followings:
你设置“位置:相对;”为你的输入。名称“relative”表示元素的位置相对于自身。如果你想让它垂直,你可以选择以下之一:
- use top instead of botoom and use pixels (px) instead of percentage (%)
- use "position:absolute;" and use way smaller units or else the element will vanish from the visible part of the screen
使用top代替botoom并使用像素(px)代替百分比(%)
使用“position:absolute;”并使用较小的单位,否则元素将从屏幕的可见部分消失
if you want the icon to be inside the bar you must specify a position to the bar class. something like:
如果您希望图标位于栏内,则必须指定栏类的位置。就像是:
#bar
{
position:relative;
/* rest of css */
}
then you may use the absolute position for you icon. place in with top:0px; and right:0px; to make it "stick" to the top-right corner of your bar
那么你可以使用绝对位置为你的图标。放在上面:0px;和右:0px;使它“粘在”酒吧的右上角
#3
0
JSFiddle
Just add the attribute top: -40px; to the input style. Because the input's width is fixed.
只需添加属性top:-40px;到输入风格。因为输入的宽度是固定的。
input{
position:relative;
bottom:1000%;
left:13%;
top:-40px;
}
#4
0
Why not just use 'display: inline-block'?
为什么不使用'display:inline-block'?
eg.
#bar span {display: inline-block}
form {display: inline-block}
See the fiddle here: http://jsfiddle.net/pavkr/483pm2x6/2/
请看这里的小提琴:http://jsfiddle.net/pavkr/483pm2x6/2/