Question

我试图制作9行字符串，根据用户在html中的点击次数进行更改：

<div id="moves">
    <p id = "one">text</p>
    <p id = "two">text</p>
    <p id = "tree">text</p>
    <p id = "four">text</p>
    <p id = "five">text</p>
    <p id = "six">text</p>
    <p id = "seven">text</p>
    <p id = "eight">text</p>
    <p id = "nine">text</p>
</div>


#moves {
    float: right;
    position:absolute;
    top:30%;
    right:50%;
    font-size:30px;

}
p{
    margin:0;

}

问题是当我将所有<p>移动到屏幕中心的第一个<p>的值更改时，即使在更改后我如何使其位置保持不变？

Answer 1

默认情况下，它们在第一次加载时呈现中心。像这样改变你的CSS

015/09/07 11:56:02 - Hadoop Copy Files - Processing row source File/folder source : [file:///C:/Study/Pentaho/data-integrationC:/Study/Pentaho/data-integration] ... destination file/folder : [hdfs://notroot/hadoop123@192.168.139.128:8020/input]... wildcard : [^.*\.txt]
2015/09/07 11:56:04 - Hadoop Copy Files - ERROR (version 5.4.0.1-130, build 1 from 2015-06-14_12-34-55 by buildguy) : Can not copy file/folder [file:///C:/Study/Pentaho/data-integrationC:/Study/Pentaho/data-integration] to [hdfs://notroot/hadoop123@192.168.139.128:8020/input]. Exception : [
2015/09/07 11:56:04 - Hadoop Copy Files - 
2015/09/07 11:56:04 - Hadoop Copy Files - Unable to get VFS File object for filename 'hdfs://notroot/hadoop123@192.168.139.128:8020/input' : Could not resolve file "hdfs://notroot/hadoop123@192.168.139.128:8020/input".
2015/09/07 11:56:04 - Hadoop Copy Files - 
2015/09/07 11:56:04 - Hadoop Copy Files - ]
2015/09/07 11:56:04 - Hadoop Copy Files - ERROR (version 5.4.0.1-130, build 1 from 2015-06-14_12-34-55 by buildguy) : org.pentaho.di.core.exception.KettleFileException: 
2015/09/07 11:56:04 - Hadoop Copy Files - 
2015/09/07 11:56:04 - Hadoop Copy Files - Unable to get VFS File object for filename 'hdfs://notroot/hadoop123@192.168.139.128:8020/input' : Could not resolve file "hdfs://notroot/hadoop123@192.168.139.128:8020/input".
2015/09/07 11:56:04 - Hadoop Copy Files - 
2015/09/07 11:56:04 - Hadoop Copy Files - 
2015/09/07 11:56:04 - Hadoop Copy Files - at org.pentaho.di.core.vfs.KettleVFS.getFileObject(KettleVFS.java:154)
2015/09/07 11:56:04 - Hadoop Copy Files - at org.pentaho.di.core.vfs.KettleVFS.getFileObject(KettleVFS.java:102)
2015/09/07 11:56:04 - Hadoop Copy Files - at org.pentaho.di.job.entries.copyfiles.JobEntryCopyFiles.ProcessFileFolder(JobEntryCopyFiles.java:421)
2015/09/07 11:56:04 - Hadoop Copy Files - at org.pentaho.di.job.entries.copyfiles.JobEntryCopyFiles.execute(JobEntryCopyFiles.java:375)
2015/09/07 11:56:04 - Hadoop Copy Files - at org.pentaho.di.job.Job.execute(Job.java:716)
2015/09/07 11:56:04 - Hadoop Copy Files - at org.pentaho.di.job.Job.execute(Job.java:859)
2015/09/07 11:56:04 - Hadoop Copy Files - at org.pentaho.di.job.Job.execute(Job.java:532)
2015/09/07 11:56:04 - Hadoop Copy Files - at org.pentaho.di.job.Job.run(Job.java:424)
2015/09/07 11:56:04 - pentaho_to_hadoop_ex3ktr - Finished job entry [Hadoop Copy Files] (result=[false])
2015/09/07 11:56:04 - pentaho_to_hadoop_ex3ktr - Job execution finished
2015/09/07 11:56:04 - Spoon - Job has ended.

并且文字保持不变。

Answer 2

CSS规则right: 50%表示元素的右侧侧将是父元素右侧的50％。您要描述的所需行为似乎是您希望元素的左指针边距离父元素右侧的50％。这是添加较长行时文本不会移动的唯一方法。

在这种情况下，您需要使用left: 50%代替right: 50%。规则left: 50%和right: 50%都在父元素上有效地指定了相同的位置，只是left: 50%将孩子的左侧定位在该位置，并且right: 50%将孩子的右侧定位在该位置。

现场演示：

＆＃13;

#moves {
    position:absolute;
    top:30%;
    left:50%;
    font-size:30px;
}

p{
    margin:0;
}

＆＃13;

<div id="moves">
    <p id = "one">text text text text</p>
    <p id = "two">text</p>
    <p id = "tree">text</p>
    <p id = "four">text</p>
    <p id = "five">text</p>
    <p id = "six">text</p>
    <p id = "seven">text</p>
    <p id = "eight">text</p>
    <p id = "nine">text</p>
</div>

＆＃13;

使字符串位置不变

2 个答案: