Проблема с тегом стиля и выравниванием

У меня возникла проблема в классе 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>

источник

2017-02-22 Noah Tanenholtz

Уменьшите значение padding в нижнем коде.

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

Ниже приводится обновленный сниппет.

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>

источник

2017-02-22 05:49:10 aje

Так, чтобы работать с выравниванием, но я пытаюсь сделать этот раздел более крупным, чем это бывает, когда заполнение находится в 500px –

, проверьте обновленный фрагмент. Я добавил 'min-height: 80vh' в' div', надеюсь, что это поможет. – aje

Атрибут выравнивание не поддерживается в HTML5. Поскольку вы объявили тип HTML html, который имеет HTML5. Вместо этого используйте CSS.

Вы можете добавить атрибут стиля style = "text-align: left";

источник

2017-02-22 06:04:49 Devendra

Так что исправить было бы сделать ваши 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>

источник

2017-02-22 06:18:11

Удалить атрибут выравнивания в тег h1 в setction1 дел.
Изменить накладку на 500px 0 500px 0 вместо 500px. Вы можете увеличить поля слева и справа, как хотите.
Не уверен, что я вас понимаю. Вы имеете в виду, что стиль .section1 не работает? Если поставить стиль в CSS, вам нужно объявить его как # section1 вместо .section1 или вы должны добавить класс = «Раздел1» в атрибуте тега DIV

Попробуйте это:

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; 
 

 
    } 
 

 
#section1 { 
 
    text-align:left; 
 
    background-color: black; 
 
    color: white; 
 
    padding: 500px 0 500px 0; 
 
}

<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>

[Редактировать] 1. Переместить section1 стиль CSS 2. наиболее импорта вещь для Align для работы заключается в использовании выравнивания текста вместо Align, как упоминалось Devendra.

источник

2017-02-22 06:59:00 Jack

Первоначально у меня был класс = section1, затем я изменил его на id, но .section1 или #section не отображаются в стилях по мере ввода. Даже если я продолжу и введите стили в #section, это не сработает. –

См. Мое редактирование. Я переместил стиль section1 в css. Вы должны использовать # section1, а не #section. Если вы установите «padding: 500px;», текст будет центрирован из-за заполнения, и вы не увидите изменения эффекта выравнивания. Представьте объект, окруженный губкой, и поставьте в коробку. Вот почему я установил его на 500 пикселей 0, просто чтобы увидеть эффект. Вы можете изменить дизайн для своих требований. – Jack

Если вы используете класс, вы должны написать class = "section1" и .section1 в css. Обратите внимание на кавычки. – Jack

Проблема с тегом стиля и выравниванием

ответ

Смежные вопросы