Вопросы Теги

(HTML / CSS) не может заставить блоки выравниваться один за другим с текстом под

Ошибка журнала и успех затем проверьте: 

export function registerUser(data){
const request = axios({
    method: "POST",
    url: `${REGISTER}${API_KEY}`,
    data: {
        email: data.email,
        password: data.password,
    },
    headers:{
        "Content-Type":"application/json"
    }
 })  
 .then(function (response) {
    // handle success
    console.log(response);
  })
 .catch(function (error) {
    // handle error
    console.log(error);
  })
0
задан SuperDJ 19 January 2019 в 19:55
поделиться

2 ответа

Я не уверен, к чему именно вы стремитесь, но основная проблема, с которой вы столкнулись, заключается в том, что вы используете много элементов ul и li, которые имеют поля по умолчанию и отступы. Так что, если вы просто сбросите это так ... 

ul {
  margin: 0;
  padding: 0;
}

... это большой шаг вперед. Следующим шагом является точная настройка ширины и т. Д. 

@charset "utf-8";
/* REVIEWS */

body {
    font-family: courier;
}
* {
  box-sizing: border-box;
}
.reviewsection {
    float: left;
    width:35%;
    margin-right: 20px;
}

.reviews {display:inline-block;
             padding-top: 10px}

.reviews a {
    color: black; 
    text-decoration: none;
    font-size: 25px;
    font-weight: bold;
    margin-top: 20px;
    border: 1px solid black;
    padding: 0px 5px;
    background-color: white;
}

.reviews a:hover {
    background-color: black; 
    color:white;
    border: 1px solid white;
}

.reviewsimg {
    display:flex;
    padding:0px;
    background-color:white;
    border: 1px solid black;
    width:100%;
    height: 100%;
    max-height: 350px;
    margin-top: -13px;
    list-style: none;
}

.albumartspace {
    width:100%;
    max-width:250px;
    height:auto;
}

.albumart {
    margin-top:22px;
    margin-left: 10px;
    margin-bottom: 5px;
    position: relative;
}

.albumart img:hover {
    opacity: .8;
}

.albumdetails {
    padding-top: 20px;
    padding-left: 20px;
    list-style: none;
}

.artistname {
    font-size: 25px;
    font-weight: bold;
}

.albumname {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.edited {
    padding-left:0px;
    list-style-type: none;
    font-style: italic;
}

.author {
    display: inline;
}

.genre {
    display: inline;
    color: red;
}

.lastedited {
    display: inline;
    color: grey;
}

/* RELEASE CALENDAR */

.releasesection {
display: inline-block;    width:60%;
    height:auto;
}

.releasecalendar {
    display:block;
    padding-top: 10px;
    float: left;
}

.releasecalendar a {
    color: white; 
    text-decoration: none;
    font-size: 25px;
    font-weight: bold;
    margin-top: 20px;
    border: 1px solid white;
    padding: 0px 5px;
    background-color: black;
}

.releasecalendar a:hover {
    background-color: white; 
    color:black;
    border: 1px solid black;
}

.calendarimg {
    float:left;
    width:100%;
    height:auto;
    margin-left: 0px;
}

.artandtext {
    display:inline-block;
    width:19%;
    height:auto;
    margin: 0px;
    list-style: none;
}

.calendarart {
    width:100%;
    height:100%;
    list-style-image: none;
    margin-right: 0px;
}

.calendarartspace {
    width:100%;
    height:100%;
    margin-right: 0px;
}
ul {
  margin: 0;
  padding: 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
    @import url("yeyeyyey.css");
    </style>
</head>

<body>
    <section class="reviewsection">
        <div class="reviews"><a href="reviews.html">reviews.</a></div>
        <ul class="reviewsimg">
            <li class="albumart"><a class="album" href="#"><img class="albumartspace" src="https://placehold.it/300x300/ccc" alt="Warehouse Project"></a></li>
                <ul class="albumdetails">
                    <li class="artistname">Artist Name</li>
                    <li class="albumname"><a class="album">Album Name</a></li>
                    <ul class="edited">
                        <li class="author">Author /</li>
                        <li class="genre"> Genre </li>
                        <li class="lastedited">/ Last Edited</li>
                    </ul>
                    <li class="albumsummary"><p>[summary of album]</p></li>
                </ul>
        </ul>
    </section>

    <section class="releasesection">
      <div class="releasecalendar"><a href="releasecalendar.html">release calendar.</a></div>
        <ul class="calendarimg">
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="https://placehold.it/300x300/ccc" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="https://placehold.it/300x300/ccc" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="https://placehold.it/300x300/ccc" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="https://placehold.it/300x300/ccc" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="https://placehold.it/300x300/ccc" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
        </ul>
    </section>
</body>
</html>

0
ответ дан Johannes 19 January 2019 в 19:55
поделиться

Вы тратите впустую свое время, пытаясь написать CSS для того, чтобы разбираться со всем этим вручную.

Посмотрите документацию по сетке Bootstrap , в которой создание макета сетки становится таким же простым, как: 

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

. меньшее устройство, например телефон или планшет.

Начать с этим так же просто, как включить размещенный на CDN Bootstrap.css в разделе <head> вашей собственной страницы. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap-grid.css" integrity="sha256-HRLYo6FLXIvFal6HYY2xyKFHJdB/vl4JQDg4fVhGujA=" crossorigin="anonymous" />

Возможно, позже вам понадобятся некоторые плагины JS, если вы захотите добавить более продвинутые функции начальной загрузки.

0
ответ дан v25 19 January 2019 в 19:55
поделиться