Борьба с выравниванием кнопок с использованием CSS - PullRequest
Новая
       0

Борьба с выравниванием кнопок с использованием CSS

0 голосов
/ 05 мая 2020

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

полный код см. Здесь: https://github.com/Betaglutamate/online-cv/blob/master/_includes/skills.html

/*   
 * Template Name: Orbit - Responsive Resume/CV Template for Developers
 * Version: 1.0
 * Author: Xiaoying Riley
 * Twitter: @3rdwave_themes
 * License: Creative Commons Attribution 3.0 License
 * Website: http://themes.3rdwavemedia.com/
*/


/* styles.css */


/* ======= Base ======= */

body {
  font-family: 'Roboto', sans-serif;
  color: #545E6C;
  background: #f5f5f5;
  font-size: 14px;
  padding: 30px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

a {
  color: #2d7788;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
}

a:hover {
  text-decoration: underline;
  color: #1a454f;
}

a:focus {
  text-decoration: none;
}

p {
  line-height: 1.5;
}

.wrapper {
  background: #42A8C0;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar-wrapper {
  background: #42A8C0;
  position: absolute;
  right: 0;
  width: 240px;
  height: 100%;
  min-height: 800px;
  color: #fff;
}

.contact-info {
  font-size: 13px;
}

.container {
  display: inline;
  /* or inline-flex */
  padding: 0em;
}

.sidebar-wrapper a {
  color: #fff;
}

.sidebar-wrapper .profile-container {
  padding: 30px;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #fff;
}

.sidebar-wrapper .name {
  font-size: 32px;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 10px;
}

.sidebar-wrapper .tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0;
}

.sidebar-wrapper .profile {
  margin-bottom: 15px;
}

.sidebar-wrapper .contact-list .fa {
  margin-right: 5px;
  font-size: 18px;
  vertical-align: middle;
}

.sidebar-wrapper .contact-list li {
  margin-bottom: 15px;
}

.sidebar-wrapper .contact-list li:last-child {
  margin-bottom: 0;
}

.sidebar-wrapper .contact-list .email .fa {
  font-size: 14px;
}

.sidebar-wrapper .container-block {
  padding: 30px;
}

.sidebar-wrapper .container-block-title {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 15px;
}

.sidebar-wrapper .degree {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 5px;
}

.sidebar-wrapper .education-container .item {
  margin-bottom: 15px;
}

.sidebar-wrapper .education-container .item:last-child {
  margin-bottom: 0;
}

.sidebar-wrapper .education-container .meta {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  margin-bottom: 0px;
  margin-top: 0;
}

.sidebar-wrapper .education-container .time {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  margin-bottom: 0px;
}

.sidebar-wrapper .languages-container .lang-desc {
  color: rgba(255, 255, 255, 0.6);
}

.sidebar-wrapper .languages-list {
  margin-bottom: 0;
}

.sidebar-wrapper .languages-list li {
  margin-bottom: 10px;
}

.sidebar-wrapper .languages-list li:last-child {
  margin-bottom: 0;
}

.sidebar-wrapper .interests-list {
  margin-bottom: 0;
}

.sidebar-wrapper .interests-list li {
  margin-bottom: 10px;
}

.sidebar-wrapper .interests-list li:last-child {
  margin-bottom: 0;
}

.main-wrapper {
  background: #fff;
  padding: 60px;
  padding-right: 300px;
}

.main-wrapper .section-title {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 500;
  color: #2d7788;
  position: relative;
  margin-top: 0;
  margin-bottom: 20px;
}

.main-wrapper .section-title .fa {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  display: inline-block;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background: #2d7788;
  text-align: center;
  padding-top: 8px;
  font-size: 16px;
  position: relative;
  top: -2px;
}

.main-wrapper .section {
  margin-bottom: 60px;
}

.main-wrapper .experiences-section .item {
  margin-bottom: 30px;
}

.main-wrapper .upper-row {
  position: relative;
  overflow: hidden;
  margin-bottom: 2px;
}

.main-wrapper .job-title {
  color: #3F4650;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
}

.main-wrapper .time {
  position: absolute;
  right: 0;
  top: 0;
  color: #97AAC3;
}

.main-wrapper .company {
  margin-bottom: 10px;
  color: #97AAC3;
}

.main-wrapper .project-title {
  font-size: 16px;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 5px;
}

.main-wrapper .projects-section .intro {
  margin-bottom: 30px;
}

.main-wrapper .projects-section .item {
  margin-bottom: 15px;
}

.skillset .item {
  margin-bottom: 15px;
  overflow: hidden;
}

.skillset .level-title {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 12px;
}

.level-title {
  display: inline-block
}

.skillset .level-bar {
  height: 12px;
  background: #f5f5f5;
}

.skillset .level-bar-inner {
  height: 12px;
  background: #7bc2d3;
}

.footer {
  padding: 30px;
  padding-top: 60px;
}

.footer .copyright {
  line-height: 1.6;
  color: #545E6C;
  font-size: 13px;
}

.footer .fa-heart {
  color: #fb866a;
}


/* Extra small devices (phones, less than 768px) */

@media (max-width: 767px) {
  .sidebar-wrapper {
    position: static;
    width: inherit;
  }
  .main-wrapper {
    padding: 30px;
  }
  .main-wrapper .time {
    position: static;
    display: block;
    margin-top: 5px;
  }
  .main-wrapper .upper-row {
    margin-bottom: 0;
  }
}


/* Small devices (tablets, 768px and up) */


/* Medium devices (desktops, 992px and up) */

@media (min-width: 992px) {
  .skillset .level-title {
    display: inline-block;
    float: left;
    width: 30%;
    margin-bottom: 0;
  }
  .skillset .level-bar {
    display: inline-block;
    width: 70%;
    float: left;
    position: relative;
    top: 1px;
  }
}


/* Large devices (large desktops, 1200px and up) */


/* Ex-Large devices (large desktops, 1200px and up) */


/* 
used for profile image
*/

.profile-img {
  max-width: 100px;
  margin-bottom: 15px;
  border: 0px solid #fff;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
<div class="item">
  <h3 class="level-title">Python</h3>
  <!-- modal start here -->
  <div class="container">
    <div id="python-modal-profile" class="modal fade" aria-labelledby="my-modalLabel" aria-hidden="true" tabindex="-1" role="dialog">
      <div class="modal-dialog" data-dismiss="modal">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Automated Analysis Pipeline for Bioreactor</h4>
          </div>
          <div class="modal-body">
            <img src="/online-cv/assets/images/Bioreactor.svg" class="img-responsive" style="width: 100%;">
            <div class="details">
              <p class="mt-3"><strong>Building an automated analysis software for our custom built bioreactor</strong> </p>
              <p>
                Generating growth curves for bacteria manually is a time-consuming and tedious activity performed by laboratories across the world. Using bioreactors can automate this process. However, these are very expensive putting this technology out of reach for
                many smaller laboratories. Our lab designed a modular bioreactor to make this technology affordable for everyone. I designed an <a href="https://github.com/Betaglutamate/Bioreactor" target="_blank">analysis program that</a>                takes raw text files output by the bioreactor and automatically calculates and graphs the growth rates.
              </p>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <a href="/online-cv/assets/documents/Plotly_example.html" target="_blank" class="btn btn-default btn-sm" role="button" aria-disabled="true">data analysis and graphing</a>
    <button id="show-img" type="button" class="btn btn-default btn-sm project" data-toggle="modal" data-target="#python-modal-profile">Automated analysis pipeline for Bioreactor</button>
  </div>
  <!-- //modal button ends here -->
  where does this go
</div>
what about this
<!-- //Modal item -->


```

problem picture

1 Ответ

2 голосов
/ 06 мая 2020

Я включил очень простой пример c в JSFiddle, поскольку в вашем примере очень много кода. ;) В следующий раз я бы посоветовал небольшой образец, так нам будет легче отладить вашу проблему: { ссылка }

Пример

Если вы хотите разместить 2 кнопки рядом друг с другом, вы можете использовать для этого flexbox, чтобы он также имел лучшее поведение при реагировании: https://jsfiddle.net/8tgm5yo6/

Пример HTML

<div class="example">
  <h3 class="example_title">I am some title</h3>
  <div class="example_buttons">
  <button class="example_button" type="button">I am a button</button>
  <button class="example_button" type="button">I am a button</button>
  </div>
</div>

Пример CSS

.example {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
}

.example_title {
  flex: 0 1 auto;
}

.example_buttons {
  margin: 0 0 0 auto;
  flex: 1 1 auto;

  display: inline-flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
}

.example_button {
  margin: 0.4em 0.2em;
}

Как и в других случаях, также недостаточно места для выравнивания кнопок рядом с каждой Другой. Вы можете сократить содержимое кнопки или немного увеличить размер контейнера, но добавить немного дополнительного поля, потому что браузеры не отображают HTML и CSS точно так же, это может отличаться на несколько пикселей.

Увеличьте ширину контейнера

Вы можете установить ширину вашего контейнера на 1070, чтобы кнопки соответствовали: 

.wrapper {
    max-width: 1070px;
}

Конечно, эта проблема все еще будет сохраняться на небольших экранах (планшеты / телефоны) или браузеры с измененным размером.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...