Question

我是html和css编码的新手，我正在创建一个响应式网页，我在div的页面顶部有一个文本，因为我减少了浏览器的宽度，文本从右侧切割，我认为marquee可能是问题的解决方案，但我听说它过时了。所以，mi如何解决我的问题？如果问题可以解决，请告诉我......

#topdiv
{
    position:fixed;
    top:0;
    width:100%;
    height:20px;
}
#topdiv p
{
    position:relative;
    color:#FFF;
    float:right;
}

Answer 1

也许这就是你想要的

＆＃13;

#topdiv
{
    position:fixed;
    top:0;
    right: 0;
    text-align: right;
    width:100%;
    height:20px;
}
#topdiv p
{
    position:relative;
    color:red;
    /*float:right;*/
}

＆＃13;

<div id="topdiv">
<p>some text jfkdjfk fjkdfjkd fghjg fjsklfjsdklf fgsdfhusdgfjksdfsdl 123</p>
</div>

＆＃13;

这里是jsfiddle https://jsfiddle.net/dbdwdcrp/

Answer 2

为什么你使用position:fixed如果你需要这个，那么你需要删除下面片段的父div检查的宽度

＆＃13;

 #topdiv {
    position: fixed;
    top: 0;
    height: 20px;
    left: 0px;
    padding: 10px;
 }
 #topdiv p {
    color:#000;
    float:right;
    text-align:justify;
    margin:0;
    }

＆＃13;

    <div id="topdiv">
     <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      <br><br>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
    </div>

＆＃13;

如果您不需要fixed position，请在css下面更新。

#topdiv {
    padding:10px;
}

＆＃13;

 #topdiv
    {
        padding:10px;
    }
    #topdiv p
    {
        color:#000;
        float:right;
        text-align:justify;
        margin:0;
    }

＆＃13;

    <div id="topdiv">
     <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      <br><br>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
    </div>

＆＃13;

Answer 3

使用topdiv的最大宽度样式

#topdiv {
    position:fixed;
    top:0;
    width:100%;
    max-width:98%;
    height:20px;
}

选框标记问题

3 个答案: