不同屏幕上的网页

Question

我有webpage由我制作。此时，在不同的屏幕上，它看起来非常不同。

在我的电脑上＆＃34;查看更多＆＃34;文字看起来像这样（我想要的）：

第一张图片：

而在另一台计算机（屏幕大小不同）上，它以这种方式看待（这不是我想要的）：

第二张图片：

在这个第二张图片中，＆＃34;查看更多＆＃34;由于某些原因（在不同的屏幕上），文字不在一行中，这不是我想要的。

注意：我已经标记了＆＃34;查看更多＆＃34;带笔的文字，方便读者查找文字。

我正在使用的CSS代码＆＃34;查看更多＆＃34;文字是：

.development-text .right-side-bottom {
    padding-left: 220px;
    padding-right: 0px !important;
    font-style: italic;
}

我想知道我需要在CSS中进行哪些更改，以便在不同的屏幕尺寸计算机上看起来相同。

Answer 1

在此课程中.development-text .right-side-bottom删除padding-left: 220px;并添加text-align: right;。这会改变您的需求。

.development-text .right-side-bottom {
  font-style: italic;
  padding-right: 0 !important;
  text-align: right;
}

Answer 2

对于您的具体问题，这应解决它：

.development-text .right-side-bottom {
    text-align: right;
    padding-right: 0px !important;
    font-style: italic;
}

然而，与在编写响应式页面的过程中遇到的全部问题相比，这只是一个小问题。我真的建议您参加响应式设计课程，例如Learn Responsive Design