Jump to content

Search the Community

Showing results for tags 'calc'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Development
    • HTML Coding
    • JavaScript
    • PHP
    • CMS
    • Database
    • Web Server
    • Web-site Development
    • Internet Marketing, SEO
  • Library
    • Tricks and solutions
    • Books
  • Commercial services
    • Freelance
    • Job
    • Goods and Services
  • Our Forum
    • Flame
    • Contests
    • Feedback and Ideas

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


Telegram


Signal


Viber


Skype


From


Interests

Found 1 result

  1. У меня двух колоночное меню: .menu > li { display: inline-block; vertical-align: top; width: 50%; border-right: 1px solid #fff; /*белая линия в конце блока. вместе с серой линией тэга <a> образует бело-серую линию*/ }.menu a { text-decoration: none; display: block; text-align: center; font-size: 14px; border-right: 1px solid #dedede; /*вместе с белой линией тега <li> образует бело-серую линию*/ }.menu > li:nth-child(2n), .menu > li:nth-child(2n) a { border-right: none; /*убираем у правых пунктов меню линии разграничения - они там не нужны, там граница самого меню*/ }Поскольку бордюр тега <а> должен влезть в <li> у которого width: 50%, то тег <a> автоматически подвинется на ширину бордюра, а вот бордюр тега самого <li> никуда двигаться не станет, и сам подвинет следующий тег <li>, в результате ширина двух таких тегов будет больше 100% из-за бордюра. Проблема решается просто добавлением li {box-sizing: border-box;}, но тогда у нас левые колонки уже правых на величину двух бордюров, тегов <a> и <li>. Не велика беда, конечно, но можно же сделать более красиво: .menu > li:nth-child(2n+1) { width: -webkit-calc(50% - 1px); width: -moz-calc(50% - 1px); width: calc(50% - 1px); Тогда линия у нас будет точно по центру: одна полосочка тега <a> будет чуть левее, а полосочка тега <li> будет чуть правее. Но вопрос, ведь спецификация calc хуже поддерживается броузерами чем border-box, можно ли как-то сделать, чтоб если calc не сработает, то сработал border-box?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy