Question

我想在同一行显示文本框和图像。现在我将像素设置调整为chrome。在firefox中会出现一些差异。我在黑色框中绘制文本框，在红色圆形图像中绘制。绿色线他们是如何处于相同的位置。

.per
{
 float:right;
 margin-right:38%;
}
p {
   font-family:arial;
	font-size:13px;
	font-weight:bold;
    text-align: left;
    margin-left:20%;
}

<p>Company Name<input type="text" name="s" size=18 maxlength=50  readonly value="sample"> </p>	      
                       <p> Title<input type="text" name="s" size=18 maxlength=50 readonly value="title"> </p>
                        <p>Start Date<input type="text" name="s" size=18 maxlength=50 readonly value="date"> </p>
                        <p>End Date<input type="text" name="s" size=18 maxlength=50 readonly value="date1"> </p>
                      <p>Pay Rate<input type="text" name="s" size=18 maxlength=50  readonly value=" pay rate "> </p>
                      	 <h3 style="align:left">Permission
                      	 
                      
                      	       <span id="per" class="per">
                      	        <img src="image/tick.png" alt="tick" style="width:15px;height:15px">
                      	        </span></h3>

我想通过计算文本起始位置而不是计算margin-right来显示它。我附有用于在铬和火狐中显示的图像的屏幕截图。

铬

enter image description here

火狐

enter image description here

需要的布局 enter image description here

Answer 1

尝试创建Div或表格，并妥善放置您的内容。

您还可以使用Bootstrap3，Foundation或其他CSS框架来使其外观整洁且反应灵敏。

Answer 2

使用以下css代码

*{
    margin:0;
    padding:0;
    }

p {
    font-family:arial;
    font-size:13px;
    font-weight:bold;
    text-align: left;
    margin-left:20%;
}
.maincontainer{
        position: relative; 

    }

.names{
    display: inline;
    position: relative; 
    left: 50px;
    margin:5px; 
}

.namescontent{
    display: inline;
    position: absolute ;
    left: 200;
    margin:5px; 
}

关注html代码

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="maincontainer"> 
        <div class="names">Company Name</div> <div class="namescontent">    <input type="text" name="s" size=18 maxlength=50  readonly value="sample"> </div> <br>
        <div class="names"> Title</div>     <div class="namescontent"><input type="text" name="s" size=18 maxlength=50 readonly value="title"> </div>
        <br>
        <div class="names">Start Date</div> <div class="namescontent">  <input type="text" name="s" size=18 maxlength=50 readonly value="date"> </div>
        <br>
        <div class="names">End Date</div>   <div class="namescontent">  <input type="text" name="s" size=18 maxlength=50 readonly value="date1"> </div>
        <br>
        <div class="names">Pay Rate</div>   <div class="namescontent">  <input type="text" name="s" size=18 maxlength=50  readonly value=" pay rate "> </div>
        <br>
        </div>
        <h3 style="align:left">Permission               


                <div class="namescontent"><img src="image/tick.png" alt="tick" style="width:15px;height:15px"></div>
            </h3>

    </body>     
</html>

文本框的css和同一行显示的图像

2 个答案: