szerokość dla <a> znacznika w html

Question

Czy można ustawić szerokość znacznika <a> w html? Jeśli tak, to w jaki sposób, jeśli nie ma żadnych prac?

Answer 1

Możesz przedefiniować go jako element blokowy, a następnie ustawić do niego szerokość: a{display:block;width:400px}.

EDYCJA: Jednak w tym przypadku rozpocznie się od nowej linii, a następny fragment tekstu znajdzie się również w nowej linii. Co rozwiązuje problem, jest inline-block tryb wyświetlania, ale to znowu ma problemy ze starszymi wersjami IE i FF (patrz tutaj: http://caniuse.com/#search=inline-block)

Answer 2

Właściwość CSS width nie wpływa na elementy wbudowane, takie jak <a> lub <span>. W celu wykorzystania właściwości blokowe jak width, musisz zadeklarować swój elementu jako element bloku poziomie, używając display:block:

<a style="display:block;width:200px">Your link</a> 

Answer 3

Jak mówili inni, element a jest elementem inline i jako takie nie interesują szerokości ani wysokości. Szuka tylko treści i staje się tak duża, jak wymaga tego treść.

Jednak w zależności od tego, co spróbujesz, aby wyglądać, możesz użyć padding i margin, aby zmienić odległość do innych elementów w linii. Na przykład <a style="padding: 0 5px;">some text</a> dodaje dopełnienie 5 pikseli po lewej i prawej stronie tekstu. Ale znowu, rzeczywisty rozmiar będzie oparty na rozmiarze tekstu.

Inne podejście, które jest bardziej hack, i jako takie należy unikać, jeśli to możliwe, byłoby następujące:

<a style="background: red; padding-right: 100px;"> 
    <span style="position: absolute;">Some text</span> 
</a> 

To dodaje dopełnienie 100px w prawo tekstu, ale ustawiając pozycję tekstu na absolutny, tekst renderuje "nad" resztę i jest ignorowany dla wszystkich dodatkowych obliczeń rozmiaru, więc element a zasadniczo nie ma bezpośredniej treści i jako taka szerokość zero z dodatkowym wypełnieniem 100 pikseli w prawo. Więc element ma dokładnie 100 pikseli szerokości. A jeśli nie zmienisz pozycji zakresu po ustawieniu go na absolutny, pozostanie on tam, gdzie byłby bez wartości absolutny, więc wygląda tak samo.

Answer 4

Jeśli nie lubisz display:block lub display:inline-block można użyć wyściółka