HamSter

Пример

js:

$(window).scroll(function(){
  if($(this).scrollTop() > 1){
    $('.nav').addClass('sticky');
  } else {
    $('.nav').removeClass('sticky');
  }
});

html:

<form >
  
  <input type="radio" name="name" id="r-1" class="input" checked>
  <input type="radio" name="name" id="r-2" class="input">
  <input type="radio" name="name" id="r-3" class="input">
  
  
    <label for="r-1" class="label l-1">Текст 1</label>
    <label for="r-2" class="label l-2">Текст 2</label>
    <label for="r-3" class="label l-3">Текст 3</label>
  
</form>

css:

.label {
  display: none;
}

#r-1:checked~.l-1,
#r-2:checked~.l-2,
#r-3:checked~.l-3{
  display: block;
}

jsbin

ul {
  column-count: 2;    
  column-gap: 0;
  position: relative;
}

html:

<div class="wrap">
  <a href="#" class="btn"></a>
</div>

css:

.wrap {
  background: #000;
}

.btn {
  display: block;
  position: relative;
  width: 15rem;
  height: 7rem;
  background: #fff;
  margin: 0 auto;
  border-radius: 0 1rem 1rem 0;
}

.btn:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 3.5rem solid transparent;	
  border-bottom: 3.5rem solid transparent;
  border-right: 3rem solid #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3rem;
}

jsbin

А вопросы все изощренней и изощренней.

Так:

    * Текст     

Так:

    * Текст     

По высоте:

         
         
    * Текст     
         
         

Еще по высоте:

<br/>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;* Текст &nbsp;&nbsp;&nbsp;&nbsp;
<br/>
<br/>

2 варианта

ПРАКТИКОВАТЬ!

Брать 1-10 макетов и верстать их.
Потом обязательно проверять на валидность.
Верстка не программирование, а всего лишь разметка.
Заучить основные теги, свойства правила и все.

#nav ul { position: relative; }

#nav ul li div.block {
    width: initial;
    ...
    position: absolute;
    left: 0;
    right: 0;
}

Вариант 1 inline-block:

<div class="wrap">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</div>

.box-1 {
  width: 5rem;
  height: 10rem;
  background: #000;
}

.box-2 {
  width: 10rem;
  height: 5rem;
  border: .25rem solid #000;
  margin-left: -5px;
}

.box {
  display: inline-block;
  vertical-align: middle;
}

Вариант 2 flex:

<div class="wrap">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</div>


.box-1 {
  width: 5rem;
  height: 10rem;
  background: #000;
}

.box-2 {
  width: 10rem;
  height: 5rem;
  border: .25rem solid #000;
}

.wrap {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

Вариант 3 float:left:

<div class="wrap">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</div>


.box-1 {
  width: 5rem;
  height: 10rem;
  background: #000;
}

.box-2 {
  width: 10rem;
  height: 5rem;
  border: .25rem solid #000;
  margin-top: 2rem;
}

.box {
  float: left;
}

Просто нужно ссылку обернуть в какой-нибудь врап:

html:

<div class="pointer">
  <a href="#" class="disabled">disabled link</a>
</div>

css:

.pointer {
  cursor: pointer !important;
}

.disabled {
  pointer-events: none;
}

example