Вопросы Теги

Если у меня есть изображение внутри кнопки, и ширина кнопки увеличивается при зависании, как я могу фиксировать положение изображения там, где оно было первоначально?

  • Предварительно запустите CFLAGS="-O0" перед запуском setup.py: 
    % CFLAGS="-O0" python ./setup.py
    При компиляции -O0 к CFLAGS будет добавлен CFLAGS, поэтому будет отменять предыдущую настройку -O2.
  • Другой способ: добавить -O0 в extra_compile_args в setup.py: 
    moduleA = Extension('moduleA', .....,
        include_dirs = ['/usr/include', '/usr/local/include'], 
        extra_compile_args = ["-O0"], 
        )
  • Если вы хотите удалить все флаги по умолчанию, используйте: 
    % OPT="" python ./setup.py
1
задан Chris 13 July 2018 в 15:01
поделиться

4 ответа

Попробуйте изменить text-align: center; на text-align: left; (для обоих классов)

0
ответ дан Jon Wyatt 17 August 2018 в 12:32
поделиться

Используйте flexbox, следующий пример кода держит ваше изображение влево, независимо от ширины вашей кнопки: 

<div class="button">
  <div class="imageContainer">
    <img src="path/to/your/image" />
  </div>
</div>

<style type="text/css">
    .button {
        display: flex;
        justify-content: flex-start;
        width: 100px;
    }
    .button:hover {
        width: 200px;
    }
    .button .imageContainer {
        height: 50px;
        width: 50px;
        align-self: center;
    }
    .imageContainer img {
        height: auto;
        width: 100%;
    }
</style>
0
ответ дан mxdi9i7 17 August 2018 в 12:32
поделиться

Я не знаком с синтаксисом реакции, но это может быть достигнуто путем добавления кнопки внутри дополнительного div в пределах того же блока.

, но есть еще много способов его достижения, также без использования другого div , см. пример

http://jsfiddle.net/wa2vht71/4/

0
ответ дан Rnayak 17 August 2018 в 12:32
поделиться

Используйте float: left, чтобы удерживать его в левой части кнопки. 

.designstudiobuttonlefttop {
 width: 60px;
 height: 60px;
 margin-top: 150px;
 display: block;
 border: 1px solid #574904;
 border-radius: 50%;
 background-color: white;
 color: #574904;
 text-align: center;
 margin-left: 50px;
 }

.designstudiobuttonlefttop:hover {
  background-color: #f2f2f2;
  color: #574904 !important;
  text-decoration: underline;
  transition-delay: 100ms !important;
  cursor: pointer !important;
  width: 200px;
  border-radius: 50px 50px 50px 50px;
}

#cutlogo {
  width: 50px;
  height: 50px;
  padding-right: 5px;
}

.designstudiobuttonleftopactive {
  color: #574904 !important;
  border: none;
  background-color: white;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 100px;
  display: block;
  margin-left: 50px;
}
<div>
        <button
          class="designstudiobuttonlefttop"
          onClick={this.cutActiveHandler}
        >
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6vxI3cA6w8ocAr3KWNHdMmq5gkkhYSuacNYaFCrQxZmeBUo2m" id="cutlogo" alt="" width="40" height="40" style="float: left;"/>
        </button>
</div>

0
ответ дан user 17 August 2018 в 12:32
поделиться