Question

“隐私政策”链接显示在我的网页中间。我需要将它设置在我的页面底部。下面给出的是我的CSS和HTML源代码。我无法将其设置在底部。

#footer {
  width: 700px;
  margin: 0 auto;
  padding-top: 200px;
}
#footer p {
  text-align: center;
  padding: 30px;
  font-size: 10px;
}

<div id="footer">
  <p>  Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p>
</div>

Answer 1

您需要使用display:block更改锚标记（#footer { width: 700px; margin: 0 auto; padding-top: 200px; } #footer p { text-align: center; padding: 30px; font-size: 10px; } #footer p a{display:block}）默认显示属性。

<div id="footer">
  <p>  Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p>
</div>

width

但如果您在a标记中添加width会很好，如果您不添加a，那么#footer p a{ display:block; max-width:80px; margin:0 auto; }标记将在悬停时使用空格。< / p>

@(Html.Kendo().Chart<MachineWorkTimeChartViewModel>()
    .Name("chartMachineWorkTime")
     .DataSource(ds => ds.Read(read => read.Action("MachineWorkTimeChart_Read", "Charts")
    .ChartArea(chartArea => chartArea
        .Background("transparent")
    )
    .Series(series =>
    {
        series.Bar(e => e.WorkMinutes).Name("Time of work");
    })
    .CategoryAxis(axis => axis
        .Name("series-axis")
        .Line(line => line.Visible(false))
    )
    .CategoryAxis(axis => axis
        .Name("label-axis")
         .Categories(e => e.MachineName)
    )
    .ValueAxis(axis => axis
        .Numeric()
            .Labels(labels => labels.Format("{0} min.")
             .Template("#= getTimeSpanFromMinutes(value) #"))
            // Move the label-axis all the way down the value axis
            .AxisCrossingValue(0, int.MinValue)
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}%")
        .Template("#= getTimeSpanFromMinutes(value) #")
    ))


<script>

function getTimeSpanFromMinutes(newMinutes) {
    var minsPerYear = 24 * 365 * 60;
    var minsPerMonth = 24 * 30 * 60;
    var minsPerWeek = 24 * 7 * 60;
    var minsPerDay = 24 * 60;
    var minsPerHour = 60;
    var minutes = newMinutes;
    var years = Math.floor(minutes / minsPerYear);
    minutes = minutes - years * minsPerYear;
    var months = Math.floor(minutes / minsPerMonth);
    minutes = minutes - months * minsPerMonth;
    var weeks = Math.floor(minutes / minsPerWeek);
    minutes = minutes - weeks * minsPerWeek;
    var days = Math.floor(minutes / minsPerDay);
    minutes = minutes - days * minsPerDay;
    var hours = Math.floor(minutes / minsPerHour);
    minutes = minutes - hours * minsPerHour;

    var timeSpan = "";

    if (years > 0)
        timeSpan += years + " years ";
    if (months > 0)
        timeSpan += months + " months ";
    if (weeks > 0)
        timeSpan += weeks + " weeks ";
    if (days > 0)
        timeSpan += weeks + " days ";
    if (hours > 0)
        timeSpan += hours + " hours ";
    if (minutes > 0)
        timeSpan += minutes + " min. ";

    return timeSpan;
}</script>

Answer 2

使用position:absolute;尝试以下解决方案：

html, body {
  margin:0;
  padding:0;
}
#footer {
  width: 700px;
  margin: 0 auto;
  position: absolute;
  bottom:0;
}
#footer p {
  text-align: center;
  padding: 30px;
  font-size: 10px;
}

<div id="footer">
  <p>  Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p>
</div>

提示：如果您希望在页面末尾始终查看页脚（也在滚动时），也可以使用position:fixed;。

你想要一个新的链接“隐私政策”吗？

您必须在页脚上设置<a>块元素，如下所示：

html, body {
  margin:0;
  padding:0;
}
#footer {
  width: 700px;
  margin: 0 auto;
  position: absolute;
  bottom:0;
}
#footer p {
  text-align: center;
  padding: 30px;
  font-size: 10px;
}
#footer a {
  display:block;
}

<div id="footer">
  <p>  Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p>
</div>

我想在HTML和CSS的网页末尾设置“隐私政策”

2 个答案: