Как сделать левую и правую границу карты в ионном прозрачном -- html поле с участием css пол Связанный проблема

How to make the left and right border of a card in ionic transparent


0
vote

проблема

русский

Ниже приведен мой HTML. У меня в общей сложности 3 карты в трех столбцах и хотите только левую и правую сторону быть прозрачными. Я пробовал устанавливать границу на белый / прозрачный, но без успеха. Что я получаю В настоящее время «SRC =» https://i.stack.imgur.com/dvyis.png Отказ Что я хочу Что я хочу

 <Код> .user-panel .card {    margin-top: 1px;  }    .user-panel {    min-height: 170px;  }    .user-panel,  .user-panel .card {    display: flex;    height: 100%;  }    .user-panel,  .user-panel .card .item {    height: inherit;    text-align: center;  }    .user-panel .user-profile-details .item {    background-color: #edfaff;  }  
 <Код> <div class="row no-padding user-panel">    <div class="col col-33 no-padding">      <div class="card  no-padding">        <div class="item item-text-wrap">          <span>            <div>              <div class="row"><i class="user-profile-icon"></i> </div>                <div>{{data}}</div>                <div>(015106)</div>                </div>           </span>        </div>      </div>    </div>    <div class="col col-33 no-padding">      <div class="card  no-padding">        <div class="item item-text-wrap">          <span>            <div>              <div>MY ACCESSES</div>             </div>           </span>        </div>      </div>    </div>    <div class="col col-33 no-padding">      <div class="card  no-padding">        <div class="item item-text-wrap">          <span>            <div>              <div>MY ACCESSES</div>            </div>           </span>        </div>      </div>    </div>  </div>  
Английский оригинал

The below is my HTML. I have a total of 3 cards in three columns and want only the left and right side to be transparent. I have tried setting border to white/transparent but no success.what I am getting currently . What I wantwhat I want

.user-panel .card {    margin-top: 1px;  }    .user-panel {    min-height: 170px;  }    .user-panel,  .user-panel .card {    display: flex;    height: 100%;  }    .user-panel,  .user-panel .card .item {    height: inherit;    text-align: center;  }    .user-panel .user-profile-details .item {    background-color: #edfaff;  }
<div class="row no-padding user-panel">    <div class="col col-33 no-padding">      <div class="card  no-padding">        <div class="item item-text-wrap">          <span>            <div>              <div class="row"><i class="user-profile-icon"></i> </div>                <div>{{data}}</div>                <div>(015106)</div>                </div>           </span>        </div>      </div>    </div>    <div class="col col-33 no-padding">      <div class="card  no-padding">        <div class="item item-text-wrap">          <span>            <div>              <div>MY ACCESSES</div>             </div>           </span>        </div>      </div>    </div>    <div class="col col-33 no-padding">      <div class="card  no-padding">        <div class="item item-text-wrap">          <span>            <div>              <div>MY ACCESSES</div>            </div>           </span>        </div>      </div>    </div>  </div>
</div
     
   
   

Список ответов

1
 
vote
vote
Лучший ответ
 

Почему вы используете карту. Просто дайте некоторое пользовательское имя класса и определите CSS для этого. Что-то вроде ниже будет работать без недостатков.

 <код> math.h1  
 

why do u use card. Just give some custom class name and define css for that. Something Like below would work without flaws.

<div class="col col-33 no-padding">     <div class="card-access  no-padding">         <div class="item item-text-wrap">             <span>                            <div>                                <div>MY ACCESSES</div>                            </div>                        </span>         </div>     </div> </div> 
</div
 
 
0
 
vote
 <код> math.h2  
 
    .user-panel .card {        border: 1px solid #ccc; //remove  this     }   //add this     .bordered-col {         border-right : 1px solid #ccc;     }  <div class="row no-padding user-panel">     <div class="bordered-col col col-33 no-padding">         <div class="card  no-padding">             <div class="item item-text-wrap">                 <span>                                <div>                                    <div class="row"><i class="user-profile-icon"></i> </div>                                    <div>{{data}}</div>                                    <div>(015106)</div>                                </div>                            </span>             </div>         </div>     </div>     <div class="col col-33 no-padding">         <div class="card  no-padding">             <div class="item item-text-wrap">                 <span>                                <div>                                    <div>MY ACCESSES</div>                                </div>                            </span>             </div>         </div>     </div>     <div class="col col-33 no-padding">         <div class="card  no-padding">             <div class="item item-text-wrap">                 <span>                                <div>                                    <div>MY ACCESSES</div>                                </div>                            </span>             </div>         </div>     </div>  </div> 
</div
 
 
 
 
0
 
vote
<Р> Попробуйте добавить <код> class в каждой <сильный> мой доступ например, <Код> <div class="access1">MY ACCESS</div> и <код> <div class="access2">MY ACCESS</div> затем добавьте этот CSS стили:
 <код> .no-padding > span > .access1{    border-right: 0; }  .no-padding > span > .access2{    border-left: 0; }   



Пожалуйста, включите ваши стили CSS тоже, так что мы можем понять вашу проблему. Оставьте комментарий, если он не работает.

 

Try to add a class in each MY ACCESS e.g. <div class="access1">MY ACCESS</div> and <div class="access2">MY ACCESS</div> then add this css styles:

.no-padding > span > .access1{    border-right: 0; }  .no-padding > span > .access2{    border-left: 0; } 



Please include your css styles too, so we can figure your problem. Leave a comment if it doesn't work.

</div
 
 

Связанный проблема

-1  Как схватить значение флажки как целое число и не строку? [Дубликат]  ( How to grab checkbox value as integer and not string ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  У меня проблема с переполнением моей контактной формы при отображении на мобильном  ( Im having an issue with my contact form overflowing when displayed on a mobile ) 
Выпуск в основном, когда у меня есть эта форма, отображаемая на мобильном телефоне, когда я перехожу на ввод текста в форму, Textarea слишком много расширяетс...

-2  Как вы можете центрировать галерею с HTML и CSS  ( How can you center a gallery with html and css ) 
Я выхожу новый HTML и CSS и надеюсь, что кто-то может помочь. с помощью W3 Schools ( http://www.w3schools.com/css/css_image_gallery. ASP ) Я создал простую ...

0  Группировка элементов Markdown в элементе div или пользовательской теги HTML  ( Grouping markdown elements in to div element or custom html tag ) 
Я использовал Jeykll Tool для генерации контента отметки вниз в HTML. Я хочу группировать ниже элементы отметки вниз в элемента Div или любой другой пользов...

0  .append () элемент с более чем одним классом  ( Append element with more than one class ) 
Я не могу найти информацию о том, можно ли использовать .append (), чтобы добавить элемент в HTML и дать этому элементу более одного класса <код> $( ".nav"...

1  JavaScript: Получение идентификатора родителя из документа  ( Javascript getting the id of the parent from a document ) 
У меня возникли проблемы с тем, чтобы получить идентификатор родителя документа, который здесь «iFrame1». Как вы можете видеть, что JavaScript должен проживат...

0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC?  ( How to close popup when youtube video is playing on esc button button ) 
Нажмите меня, чтобы увидеть демонстрацию Когда видео не играет, то кнопка ESC нажала всплывающее окно, но он не работает при воспроизведении видео. ...

0  всплывающее окно не назначает центр экрана  ( Popup not assign the center of the screen ) 
У меня есть код ниже, чтобы назначить всплывающую точный центр экрана. Но это не работает. Всплывающее окно появляется в разных местах, основанных на размере ...

0  Маржа не действует должным образом в Firefox  ( Margin not acting properly in firefox ) 
У меня очень странная проблема, что за жизнь меня я могу решить. По сути, в Safari My Top Navigation не имеет верхнего поля и является промывкам с самой верхн...

0  Почему изображение не отображается в Div в IE8  ( Why image doesnt show up within a div in ie8 ) 
У меня есть следующие HTML: <код> <!-- default stylesheets --> <link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css"> <!-- if ie version...

2  SMTPClient отправляет RAW HTML  ( Smtpclient sending raw html ) 
Может ли кто-нибудь сказать мне, почему следующий код отправляет электронные письма в Raw HTML? Как в, электронная почта выглядит когда вы просматриваете исто...

30  Как я могу использовать Nodejs с Windows 7? [закрыто]  ( How can i use nodejs with windows 7 ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> <Путь d = "M15 6.38A6.48 6.48 0 007.78. 04H-.02A6.49 6.49 0 002.05 ...

31  Обнаружение первого и последнего элемента внутри Groovy каждая крышка {}  ( Detecting first and last item inside a groovy each closure ) 
Я использую Groovy's Handy Markupbuilder для создания HTML-страницы из различных исходных данных. Одна вещь, которую я изо всех сил пытаюсь сделать красиво,...

1  JavaScript не работает над динамическим контентом  ( Javascript not working on dynamic content ) 
У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются ...

6  Как я могу найти неиспользованные CSS в AJAX приложении?  ( How can i find unused css in ajax app ) 
Я искал, и я не могу найти какие-либо дополнения или JavaScript для поиска неиспользованных CSS в приложениях AJAX. Select-Me Selectors Можете сделать са...

Связанный проблема

-1  Как схватить значение флажки как целое число и не строку? [Дубликат] 
0  У меня проблема с переполнением моей контактной формы при отображении на мобильном 
-2  Как вы можете центрировать галерею с HTML и CSS 
0  Группировка элементов Markdown в элементе div или пользовательской теги HTML 
0  .append () элемент с более чем одним классом 
1  JavaScript: Получение идентификатора родителя из документа 
0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC? 
0  всплывающее окно не назначает центр экрана 
0  Маржа не действует должным образом в Firefox 
0  Почему изображение не отображается в Div в IE8 
2  SMTPClient отправляет RAW HTML 
30  Как я могу использовать Nodejs с Windows 7? [закрыто] 
31  Обнаружение первого и последнего элемента внутри Groovy каждая крышка {} 
1  JavaScript не работает над динамическим контентом 
6  Как я могу найти неиспользованные CSS в AJAX приложении?