Question

我需要在一行中制作我的徽标和文本框。徽标必须位于左侧，文本框位于中间。

我的CSS是：

@charset "utf-8";

body {
background: url("../paveikslai/fonas.jpg") no-repeat top center;
margin: 0;
}

.linija {
background:url("../paveikslai/v_linija.png") repeat-x;
height: 150px;
padding: 10px;
margin: 0;
}

.logotipas {
float: left;
display: inline;
margin: 0 15px;
}

.deze_tekstui {
margin: 0 50%;
}

HTML就是：

<!doctype html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='/stilius/stilius.css'>
<meta charset='utf-8'>
<link rel="icon" type="image/png" href="../paveikslai/favicon.ico">
<title>Minduvos Statyba</title>
</head>
<body>
<div class="linija">
<div class="deze_tekstui">
<img src="../paveikslai/deze_tekstui.png">
</div>
<div class="logotipas">
<a href="../"><img src='../paveikslai/minduva.png' height='120px' width='234px' alt="Minduvos Statyba"></a>
</div>
</div>

</body>
</html>

Answer 1

如果您希望徽标显示在固定位置（左上角），则无法将其设置为inline。

.logotipas {
    margin: 15px;
    position: absolute;
    top: 0;
}

我推荐使用带有Firebug的Firefox，这使得即时实验非常容易。

Answer 2

您可以为文本框使用徽标的绝对位置和自动边距，但您必须定义其工作的宽度。

body {
background: url("../paveikslai/fonas.jpg") no-repeat top center;
margin: 0;
position: relative;
}

.linija {
background:url("../paveikslai/v_linija.png") repeat-x;
height: 150px;
padding: 10px;
margin: 0;
}

.logotipas {
display:block;
margin: 0 15px;
position: absolute;
top: 10px;
left: 10px;
}

.deze_tekstui {
margin: 0 auto;
width: 500px;
}

不能使图像内联

2 个答案: