Question

我在我创建的div类中遇到了一个名为section1的问题，其中段落不会左对齐，当我尝试在封闭头部下的样式标记中编辑它的样式时，.section1不显示和在设置对齐时不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">



</head>
<style>
    body {margin:0;}
    .Header {
        z-index: 100;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #000000;
        height: 70px;
    }

    @media screen and (max-width:680px) {
        .Header.responsive {position: relative;}
        .Header.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

    }
    @media (max-width: 960px){
    .Header .headerLogo{
        position: relative;
        display: flex;
        width: 86px;
        height: 15px;
        margin: 0 auto;
    }
    }
    .headerLogo{
        text-align: center;
        font-size: small;
        font-style: italic;
        font-family: Verdana;
        color: white;

    }


</style>
<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">


    </a>
</div>
</body>

<body>


<div class="w3-content w3-section" style="max-width:500px">
    <img class="mySlides w3-animate-right" src= style="width:100%">
    <!--<img class="mySlides w3-animate-right" src="img_rr_02.jpg" style="width:100%">
    <img class="mySlides w3-animate-right" src="img_rr_03.jpg" style="width:100%">
    <img class="mySlides w3-animate-right" src="img_rr_04.jpg" style="width:100%"> _-->
    <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
    </div>
</div>

<div id="section1" align="left" style = "background-color: black; color: white; padding: 500px">
    <a class = "header1">
    <h1 align="left" style = "font-size: x-large">A new way to fold a board</h1>
        <p></p>
    </a>
</div>

<script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
        setTimeout(carousel, 5000);
    }
</script>
</body>
</html>

Answer 1

在下面的代码中减少padding的值。

<div id="section1" align="left" style = "background-color: black; color: white; padding: 500px">

以下是更新的代码段。

＆＃13;

I am having an issue in the div class that I created named section1, where the paragraph wont align left and when I try to edit the style of it in the style tag under the closed head, .section1 does not show up and does not work when I set the alignment.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Lunation Boards</title>

</head>
<style>
    body {margin:0;}
    .Header {
        z-index: 100;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #000000;
        height: 70px;
    }

    @media screen and (max-width:680px) {
        .Header.responsive {position: relative;}
        .Header.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

    }
    @media (max-width: 960px){
    .Header .headerLogo{
        position: relative;
        display: flex;
        width: 86px;
        height: 15px;
        margin: 0 auto;
    }
    }
    .headerLogo{
        text-align: center;
        font-size: small;
        font-style: italic;
        font-family: Verdana;
        color: white;

    }


</style>
<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <h1>Lunation Boards</h1>

    </a>
</div>
</body>

<body>


<div class="w3-content w3-section" style="max-width:500px">
    <img class="mySlides w3-animate-right" src="file:///C:/Users/noaht/Downloads/skateboard.pdf" style="width:100%">
    <!--<img class="mySlides w3-animate-right" src="img_rr_02.jpg" style="width:100%">
    <img class="mySlides w3-animate-right" src="img_rr_03.jpg" style="width:100%">
    <img class="mySlides w3-animate-right" src="img_rr_04.jpg" style="width:100%"> _-->
    <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
    </div>
</div>

<div id="section1" align="left" style = "background-color: black; color: white; padding: 10px; min-height:80vh">
    <a class = "header1">
    <h1 align="left" style = "font-size: x-large">A new way to fold a board</h1>
        <p></p>
    </a>
</div>

<script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
        setTimeout(carousel, 5000);
    }
</script>
</body>
</html>

＆＃13;

Answer 2

HTML5中不支持align属性。正如您声明的文档类型html是HTML5。请改用CSS。

您可以添加样式属性样式=＆＃34; text-align：left＆＃34 ;;

Answer 3

因此修复方法是制作display: inline-block和width:100%。这样做可以为您提供所需的效果。现在你的h1将隐藏你的标题的原因。所以只要给它一个保证金顶部，你就会好起来。

<div id="section1" align="left" style = "background-color: black; color: white; padding-top:500px; display:inline-block;width:100%;">
  <a class = "header1">
    <h1 align="left" style = "margin-top:50px; font-size: x-large">A new way to fold a board</h1>
    <p></p>
  </a>
</div>

Answer 4

删除setction1 div中h1标记中的align属性。
将填充更改为500px 0 500px 0而不是500px。您可以根据需要增加左/右边距。
不确定我是否理解你的问题。你的意思是.section1的风格不起作用？如果将样式放在css中，则需要将其声明为＃section1而不是.section1，或者必须在div标记属性中添加class =“section1”

试试这个：

<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <h1>Lunation Boards</h1>

    </a>
</div>
</body>

<body>


<div class="w3-content w3-section" style="max-width:500px">
    <img class="mySlides w3-animate-right" src="file:///C:/Users/noaht/Downloads/skateboard.pdf" style="width:100%">
    <!--<img class="mySlides w3-animate-right" src="img_rr_02.jpg" style="width:100%">
    <img class="mySlides w3-animate-right" src="img_rr_03.jpg" style="width:100%">
    <img class="mySlides w3-animate-right" src="img_rr_04.jpg" style="width:100%"> _-->
    <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
    </div>
</div>

<div id="section1">
    <a class = "header1">
    <h1  style = "font-size: x-large">A new way to fold a board</h1>
        <p></p>
    </a>
</div>

<script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
        setTimeout(carousel, 5000);
    }
</script>
</body>

  $(document).ready(function(){
            calulateDays()
    });

    function calulateDays(){
        $('#levTo').blur(function(){
var levfrom=$('#levFrom').val();
    levto=$('#levTo').val();
    from, to,duration;

from = moment(levfrom, 'YYYY-MM-DD');
to = moment(levto,'YYYY-MM-DD');
duration=to.diff(from,'days')    
$('#levDuration').val(duration + ' days');

});
}

[编辑] 1.将section1样式移动到css 2.对齐工作最重要的是使用text-align而不是像Devendra所提到的那样对齐。

样式标记和对齐问题

4 个答案: